How to reapply bindings to same element again

Question

I am using knockout binding.

After initially creating the table and setting the binding, I am trying to add a new row or update an existing entry, and then update the table.

But when data gets updated, KnockOut is giving me the error message "You cannot apply bindings multiple times to the same element".

Here is my code

 ko.applyBindings(viewModel);
 $('.tree').treegrid();

Answer 1

Per the error, re-binding an already bound element is not possible. Clearing the existing bindings and then re-binding is also not the ideal way to do updates.

Based on our chat last night, I believe you are trying to update the table and then show that reflective update.

Instead, please consider the following example to update an existing KnockOut table.

It isn't using jQuery or TreeGrid, but adding them shouldn't be too much work. I feel removing them simplifies this example to make it more clear.

Otherwise, this should be a pretty good example of adding, removing, and changing table entries dynamically (and not just on initialization).

Code

// Function to create KnockOut view
var ViewModel = function() {
var self = this;

// This is row 0.
self.rows = ko.observableArray([
    {name:'DefaultEntry', number:-1}
]);
}

// Function to create a row entry
var Row = function(name, number) {
var self = this;
self.name = ko.observable(name);
self.number = ko.observable(number);   
};

// Create the view and apply bindings.
vm = new ViewModel();
ko.applyBindings(vm);

// Add more rows live
vm.rows.push(new Row('OldTest',10)); // Row 1, Row 0 was defined earlier.
vm.rows.push(new Row('Sam',1010));
vm.rows.push(new Row('Max',1523));

// Change a specific entry ("OldTest" -> "NewTest")
// Note: vm.rows() returns an array of rows in the table, and [1] selects the index number of Row 1.
// vm.rows()[1] returns the index which KO can reference of row 1
vm.rows.replace(vm.rows()[1], new Row('NewTest',9999));

// Remove last entry
vm.rows.pop();

// Remove all rows
vm.rows.removeAll();

// Add new row
vm.rows.push(new Row('Bob',2000));
vm.rows.push(new Row('Tom',3000));
vm.rows.push(new Row('Sally',4000));
vm.rows.push(new Row('Lou',5000));
vm.rows.push(new Row('Zack',6000));

// Remove all rows where name == 'Tom'
vm.rows.remove( function (person) { return person.name() == "Tom"; } )

// Remove row 2-3 (Lou and Zack)
garbageData = vm.rows.splice(2,3);

// In the above example, garbageData contains an array of the removed rows.
// Splice also works as "vm.rows.splice(2,3);"
// You do not need to save the array returned by splice.

// Final output:
// Bob   2000
// Sally 4000

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>


<table>
<thead>
    <tr>
        <th>Name</th>
        <th>Number</th>
    </tr>
</thead>
<tbody data-bind="foreach: rows">
    <tr>
        <td><input class="input-small" data-bind="value: name"/></td>
        <td><input class="input-small" data-bind="value: number"/></td>
    </tr>
</tbody>
</table>

I'm also adding the KnockoutJS site which shows additional methods which are available to manipulating those rows: KnockoutJS - Observable Arrays

Answer 2

You should clean the node first and apply the knockout bindings.

ko.cleanNode($('#html-element-id')[0]);
ko.applyBindings(new ViewModel(modelData{}), $('#html-element-id')[0]);