How to apply binding programmatically to elements inside a foreach

[Hubert Przybysz]

Is it possible to apply binding programmatically to elements inside a foreach binding ? And, if so, how?

Let's take a simple view model as an example:

function item(id) {

   this.id = id || ++item.cnt;

}

item.cnt = 0;

var viewModel = {

   items: ko.observableArray(),

   addItem: function() {

      viewModel.items.push(new item());

   },

   removeItem: function(item) {

      viewModel.items.remove(item);

   }

}

ko.applyBindings(viewModel);

which declaratively is bound like this in html:

<button data-bind="click: addItem, clickBubble: false">Add item</button>

<div id="items" data-bind="foreach: items">

   <label>Item: <input data-bind="value: id"/></label>

   <button data-bind="click: $root.removeItem, clickBubble: false">Remove</button>

</div>

When trying to convert the declarative bindings to programmatic I removed data-binds from the html:

<button id="add">Add item</button>

<div id="items">

   <label>Item: <input id="item"/></label>

   <button id="remove">Remove</button>

</div>

but got stuck after the foreach:

ko.applyBindingAccessorsToNode(document.getElementById("add"), {click: viewModel.addItem}, viewModel);

ko.applyBindingAccessorsToNode(document.getElementById("items"), {foreach: viewModel.items}, viewModel);
// what now ???

Any help will be appreciated.

[Thiago de Menezes Cristo]

Hi Hubert.

Could you explain why you are working in this way?

Why don't you use this kind of declaration:

<div data-bind="foreach: items">

     <div data-bind="component: { name: componentName, params: {} }"></div>

</div>

Thiago de Menezes Cristo

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Hubert Przybysz]

Hi Thiago,

I'm simply evaluating KO for use with a number of other in-house applications and see that such functionality might be useful. So, right now this is rather a theoretical problem for which I could not find a documented solution.

Regards / Hubert.

[Nick]

What you have should probably work with the exception that your template is reusing the id 'item' and 'remove' on your input and button elements respectively, which is simply a bug.
Like others have said, implenting an application this way is pretty much negating the principal value and purpose of using ko, so *why*? You might as well just write plain js.

[Hubert Przybysz]

Hi Nick,

As I mentioned in my earlier post this simple example is just a means to understand KO better.

Trying to understand your response, are you saying that KO does not provide means to programmatically apply binding inside a foreach binding ?

Regards / Hubert.

[Michael Best]

If you're going to use ko.applyBindingAccessorsToNode, the "values" need to be actually be functions that return the bound value. This provides a way for the binding to always get the latest value.

ko.applyBindingAccessorsToNode(document.getElementById("items"), {foreach: function () { return viewModel.items; } }, viewModel);

But if you're mainly concerned with having "data-bind" attributes in the HTML, you could try using a custom binding provider such as https://github.com/rniemeyer/knockout-classBindingProvider

-- Michael

[Hubert Przybysz]

Hi Michael,

Thank you for sharing the link to the classBindingProvider! 

While I was looking for a native KO way to bind programmatically, using a custom binding provider may be the next best thing.

Regards / Hubert.