How to get the elements bound to a model in Knockoutjs

Question

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

Answer 1

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.

At 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/