How to clear/remove observable bindings in Knockout.js?

javascript knockout.js
awj picture awj · Apr 6, 2012 · Viewed 111.1k times · Source

I'm building functionality onto a webpage which the user can perform multiple times. Through the user's action, an object/model is created and applied to HTML using ko.applyBindings().

The data-bound HTML is created through jQuery templates.

So far so good.

When I repeat this step by creating a second object/model and call ko.applyBindings() I encounter two problems:

  1. The markup shows the previous object/model as well as the new object/model.
  2. A javascript error occurs relating to one of the properties in the object/model, although it's still rendered in the markup.

To get around this problem, after the first pass I call jQuery's .empty() to remove the templated HTML which contains all the data-bind attributes, so that it's no longer in the DOM. When the user starts the process for the second pass the data-bound HTML is re-added to the DOM.

But like I said, when the HTML is re-added to the DOM and re-bound to the new object/model, it still includes data from the the first object/model, and I still get the JS error which doesn't occur during the first pass.

The conclusion appears to be that Knockout is holding on to these bound properties, even though the markup is removed from the DOM.

So what I'm looking for is a means of removing these bound properties from Knockout; telling knockout that there is no longer an observable model. Is there a way to do this?

EDIT

The basic process is that the user uploads a file; the server then responds with a JSON object, the data-bound HTML is added to the DOM, then the JSON object model is bound to this HTML using

mn.AccountCreationModel = new AccountViewModel(jsonData.Account);
ko.applyBindings(mn.AccountCreationModel);

Once the user has made some selections on the model, the same object is posted back to the server, the data-bound HTML is removed from then DOM, and I then have the following JS

mn.AccountCreationModel = null;

When the user wishes to do this once more, all these steps are repeated.

I'm afraid the code is too 'involved' to do a jsFiddle demo.

Answer

KodeKreachor picture KodeKreachor · Apr 7, 2012

Have you tried calling knockout's clean node method on your DOM element to dispose of the in memory bound objects?

var element = $('#elementId')[0]; 
ko.cleanNode(element);

Then applying the knockout bindings again on just that element with your new view models would update your view binding.

Related questions

Javascript Equivalent to C# LINQ Select

Following this question here : Using the checked binding in knockout with a list of checkboxes checks all the checkboxes I've created some checkboxes using knockout that allow selection from an array. working fiddle taken from above post: http://jsfiddle.net/…

Read More
Passing parameter using onclick or a click binding with KnockoutJS

I have this function: function make(place) { place.innerHTML = "somthing" } I used to do this with plain JavaScript and html: <button onclick="make(this.parent)">click me</button> How can I do this using idiomatic knockout.…

Read More
Close Bootstrap Dropdown after link click

I have a bootstrap dropdown menu below. It has a link in it hooked up to a knockout.js binding, that returns false because I dont want the # tag to be send to the browser url. However doing this doesnt …

Read More