How to clear remove observable bindings in Knockout js

Question

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    The markup shows the previous object model as well as the new object model  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

User · Answer

I think it might be better to keep the binding the entire time, and simply update the data associated with it. I ran into this issue, and found that just calling using the .resetAll() method on the array in which I was keeping my data was the most effective way to do this.

Basically you can start with some global var which contains data to be rendered via the ViewModel:

var myLiveData = ko.observableArray();

It took me a while to realize I couldn't just make myLiveData a normal array -- the ko.oberservableArray part was important.

Then you can go ahead and do whatever you want to myLiveData. For instance, make a $.getJSON call:

$.getJSON("http://foo.bar/data.json?callback=?", function(data) {
    myLiveData.removeAll();
    /* parse the JSON data however you want, get it into myLiveData, as below */
    myLiveData.push(data[0].foo);
    myLiveData.push(data[4].bar);
});

Once you've done this, you can go ahead and apply bindings using your ViewModel as usual:

function MyViewModel() {
    var self = this;
    self.myData = myLiveData;
};
ko.applyBindings(new MyViewModel());

Then in the HTML just use myData as you normally would.

This way, you can just muck with myLiveData from whichever function. For instance, if you want to update every few seconds, just wrap that $.getJSON line in a function and call setInterval on it. You'll never need to remove the binding as long as you remember to keep the myLiveData.removeAll(); line in.

Unless your data is really huge, user's won't even be able to notice the time in between resetting the array and then adding the most-current data back in.

User · Answer

Have you thought about this   try       ko applyBindings PersonListViewModel     catch  err        console log err message       I came up with this because in Knockout  i found this code      var alreadyBound   ko utils domData get node  boundElementDomDataKey       if   sourceBindings            if  alreadyBound                throw Error  You cannot apply bindings multiple times to the same element                       ko utils domData set node  boundElementDomDataKey  true           So to me its not really an issue that its already bound  its that the error was not caught and dealt with

User · Answer

I have to call ko applyBinding each time search button click  and filtered data is return from server  and in this case following work for me without using ko cleanNode   I experienced  if we replace foreach with template then it should work fine in case of collections observableArray   You may find this scenario useful    lt ul data-bind  template    name   template   foreach  Events    gt  lt  ul gt    lt script id  template  type  text html  gt       lt li gt  lt span data-bind  text  Name  gt  lt  span gt  lt  li gt   lt  script gt

User · Answer

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

User · Answer

I have found that if the view model contains many div bindings the best way to clear the ko applyBindings new someModelView   is to use  ko cleanNode    body   0    This allows you to call a new ko applyBindings new someModelView2   dynamically without the worry of the previous view model still being binded

User · Answer

I had a memory leak problem recently and ko cleanNode element   wouldn t do it for me -ko removeNode element   did  Javascript   Knockout js memory leak - How to make sure object is being destroyed

User · Answer

For a project I m working on  I wrote a simple ko unapplyBindings function that accepts a jQuery node and the remove boolean   It first unbinds all jQuery events as ko cleanNode method doesn t take care of that  I ve tested for memory leaks  and it appears to work just fine   ko unapplyBindings   function   node  remove           unbind events      node find      each function                this  unbind                    Remove KO subscriptions and references     if  remove            ko removeNode  node 0          else           ko cleanNode  node 0

User · Answer

Instead of using KO s internal functions and dealing with JQuery s blanket event handler removal  a much better idea is using with or template bindings  When you do this  ko re-creates that part of DOM and so it automatically gets cleaned  This is also recommended way  see here  https   stackoverflow com a 15069509 207661

User · Answer

You could try using the with binding that knockout offers  http   knockoutjs com documentation with-binding html The idea is to use apply bindings once  and whenever your data changes  just update your model   Lets say you have a top level view model storeViewModel  your cart represented by cartViewModel  and a list of items in that cart - say cartItemsViewModel   You would bind the top level model - the storeViewModel to the whole page  Then  you could separate the parts of your page that are responsible for cart or cart items   Lets assume that the cartItemsViewModel has the following structure   var actualCartItemsModel     CartItems        ItemName   FirstItem   Price  12         ItemName   SecondItem   Price  10         The cartItemsViewModel can be empty at the beginning   The steps would look like this    Define bindings in html  Separate the cartItemsViewModel binding            lt div data-bind  with  cartItemsViewModel  gt         lt div data-bind  foreach  CartItems  gt           lt span data-bind  text  ItemName  gt  lt  span gt           lt span data-bind  text  Price  gt  lt  span gt         lt  div gt       lt  div gt      The store model comes from your server  or is created in any other way    var storeViewModel   ko mapping fromJS modelFromServer  Define empty models on your top level view model  Then a structure of that model can be updated with actual data           storeViewModel cartItemsViewModel   ko observable        storeViewModel cartViewModel   ko observable       Bind the top level view model   ko applyBindings storeViewModel   When the cartItemsViewModel object is available then assign it to the previously defined placeholder   storeViewModel cartItemsViewModel actualCartItemsModel     If you would like to clear the cart items      storeViewModel cartItemsViewModel null    Knockout will take care of html - i e  it will appear when model is not empty and the contents of div  the one with the  with binding   will disappear

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

Examples related to javascript

Examples related to knockout.js