You cannot apply bindings multiple times to the same element knockout

Question

I know this question was asked before but using cleanNode did not fix the problem .

I need to display a list of orders Ids that are stored in an array .here is what I did so far:

     self.Orders = ko.observableArray([]);
 for (var i = 0; i <= self.OrdersIds().length; i++) {                                  
    //ko.cleanNode($("#Table"));
     ko.applyBindings({ Orders: [{ orderId : self.OrdersIds()[i] }] }, document.getElementById("oTable"));
            }

    <table id="commentsTable">
        <tbody data-bind="foreach: Orders">
            <tr>
                <td data-bind="text: orderIdt"></td>

            </tr>
        </tbody>
    </table>

Why are you calling applybindings in a loop at all? This code doesn't make much sense. Please include more of it or give some more context in your description. — Jason Spake

Olha Shumeliuk Olha Shumeliuk · Accepted Answer · 2018-06-12T17:59:16

When u are doing ko.applyBindings without passing element id model automatically get applied to the whole document.

You can pass to function applyBindings second argument - html element to which you want to apply bindings. In your case :

ko.applyBindings({ Orders: this.Orders }, document.getElementById('oTable'));

That would map each property (recursive) in your model (Orders) to html table 'oTable'. And after that you can modify your Orders js model (add/remove items from array) and that all will be reflected in your html.

Your example is not fully correct, because there u neglect main advantage of knockout (i mean observables). When you do create your model in such way Orders: [{ orderId : self.OrdersIds()[i] } - it's not longer act as observable array and HTML can't react to model changes.

You cannot apply bindings multiple times to the same element knockout

1 Answers