How to bind and unbind dynamically at runtime?

[WesN]

Right now I have a model with various model items as its children. The behavior I am looking for is to have the user tap/click on the correct model item to advance the animation/sequence.

What I think would help get me accomplish my task is to either:

A) Have it so that on-click I bind the next model item with a ".svc.play" and unbind the previous model item so that way the user cannot click on the wrong parts to trigger the next sequence

B) Have an if-else statement on the javascript side to track and verify that the correct model item is clicked then have it play the next sequence.

Does anyone know how to bind/unbind the services via javascript?

[jevana · Accepted solution]

If I was you I would create a switch case function in javascript. If you click on your modelitem you can call the function and give an extra variable with it to check where you are in your sequence.

for example:

------- add this in the javascript box with your modelitem number 1------

sequence(1);

------- add this in the javascript box with your modelitem number 2------

sequence(2);

------ function to add in the javascript page-----

var control = 1;

$scope.sequence = function (tag) {

if (control == tag) {

control++;

switch (tag) {

case 1:

$scope.view.wdg['model']['currentStep'] = 1;

$timeout( function () {
$scope.app.fn.triggerWidgetService('model','play');
},500);

break;

case 2:

$scope.view.wdg['model']['currentStep'] = 2;

$timeout( function () {
$scope.app.fn.triggerWidgetService('model','play');
},500);

break;

default:

break;

}

} else {

//show popup that tells that the wrong modelitem is clicked

}

}

Hope this will help you in the right direction 🙂

[WesN]

This is exactly what I needed. Thanks. I was making it too complicated and was trying to figure out how to receive the "identity/origin" of the click to figure out how to control which step I was on.

Your suggested implementation works very well for me. Much appreciated.

There is one follow-up question that I have. Right now, I have a bug where if I try to click/tap on the next model item while an animation is playing out, the control count will go up at least one extra time. This makes it so that when I try and click on the next model item, it will not continue forward, because tag is now behind control (as control++ one too many times).

Ex:

model-item2 is playing its animation, I attempt to click on model-item3 midway through model-item2's animation. For whatever reason, control will be equal to tag, but since the animation is not done, the program will say something along the lines of "will not interrupt current animation." But then my tag and control variable are no longer in sync, so the correct case X will not trigger properly. I've tried rearranging where to put control++ and I even experimented with a few $timeout() functions in various locations. I haven't been able to figure it out, as depending on how I reorder it causes more bugs such as spam-clicking the correct model-itemX while the model is playing the sequence will yield similar bugs.

Usually when I make a similar implementation using 2D widgets, I'll just disable them for a certain duration; however, I'm a little stumped on what to do here.

The reason I'm trying to mitigate this is so that I can factor in users that get impatient and/or do not realize that the previous animation is not yet done.

[jevana]

I can imagine that this will create rare things.

There is a simple solution for it. When you plan an animation the model has a variable "playing" that will set to true when playing and false when not. So you can add this extra line of code

-------extra line of code

var playing = $scope.view.wdg['model']['playing'] // this will set playing true or false

------complete code could be something like this----------

var control = 1;

$scope.sequence = function (tag) {

var playing = $scope.view.wdg['model']['playing']

if (control == tag && playing == false) {

control++;

switch (tag) {

case 1:

$scope.view.wdg['model']['currentStep'] = 1;

$timeout( function () {
$scope.app.fn.triggerWidgetService('model','play');
},500);

break;

case 2:

$scope.view.wdg['model']['currentStep'] = 2;

$timeout( function () {
$scope.app.fn.triggerWidgetService('model','play');
},500);

break;

default:

break;

}

} else {

//show popup that tells that the wrong modelitem is clicked

//say wait until animation is stopped when playing is true

}

}

I hope this will solve your bugs 🙂

[WesN]

Perfect! This solved my problems! Here's to hoping there are no more unforeseen bugs.