I want to add a product, find the node an let it flash
products = observableArray([]);
new_product = new Product();
products.push(new_product);
$("tr", new_product.elements).flash();
I tried using afterAdd but it flashed each time I added something. I need to flash only with one of my adding function. The other functions which add should not flash the element.
NOTE: flash is a custom JQuery function
Since an observable can be bound to multiple elements, your best bet is to really come at it from the element in the form of a custom binding.
ReplyDeleteAt its simplest, you could use a binding like:
ko.bindingHandlers.flash = {
init: function(element) {
$(element).flash();
}
};
Use it on your element like: <li data-bind="flash: true"></li>. In this case what you pass to the binding does not matter.
Here is a sample: http://jsfiddle.net/rniemeyer/Exmvh/
You can certainly pass options to your binding like:
ko.bindingHandlers.flash = {
init: function(element, valueAccessor) {
var duration = ko.utils.unwrapObservable(valueAccessor());
$(element).hide().flash(duration);
}
};
And use it like: <li data-bind="flash: 500"></li> or use an observable that you can use to control the duration: <li data-bind="flash: selectedDuration"></li>
Here is a sample: http://jsfiddle.net/rniemeyer/Exmvh/1/