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

Rovner

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/

Podium

Thanks but I think this the same as using "afterAdd: flash" – Rovner

How can I get the multiple elements of an observable? – Rovner

This advantage to using a binding is that you can be explicit on which elements have the binding and have a better change to pass options and respond to observables. Can you clarify a bit what you mean by multiple elements of an observable? – Podium

Also, one way to prevent your initial elements from "flashing" is to either set a 0 duration until after start up, or read a flag to indicate that it is okay to animate now. – Podium

Here is another sample: jsfiddle.net/rniemeyer/Exmvh/2. Kind of gets at your need to sometimes flash and sometimes not. – Podium

RP Niemeyer, how can you get code to run 'after start up'. I'm looking for a way to set duration or a flag after applyBindings, but can't find a good way to do this. – Tensity

Generally your options would be something like have duration be an observable and pass it to the binding or what I like to do a lot is add "global" options to the custom binding. So, you would set ko.bindingHandlers.flash.duration = yourvalue and then read it in the custom binding from that location. Not sure if that matches your scenario. Maybe throw a fiddle together. I would be happy to help. – Podium

ok, so what seems to work for now is that i just set ko.bindingsApplied = false before I call ko.applyBindings, and then set it to true afterwards. Then I can see if I should flash or not by reading ko.bindingsApplied. – Tensity