I have a situation where I build a div container dynamically that has other html elements inside bonded to my knockout view model. It works up to the point where I call a method on my knockout view model that needs to redraw the whole div. After the redraw knockout stops working.

for example:

 calendar += ('<div class="month-nav-container"><div class="nav-prev" data-bind="click:          $root.showPreviousMonthOnPrevMonthBtnClick" ><<<</div><span class="month-name-calendar">' + monthNames[month] + '</span><div class="nav-next" data-bind="click: $root.showNextMonthOnNextMonthBtnClick" >>>></div></div>');

I build my calendar control like so of course this is just part of it, but I hope you get the general Idea.

my knockout view model method:

self.showPreviousMonthOnPrevMonthBtnClick = function () {
    alert("prev");
    var $calendar = $("#calendar");
    $calendar.empty();

    ////// previous month
    if (self.calendarDisplayDate.month == 0) {
        $calendar.calendarWidget({ month: 12, year: self.calendarDisplayDate.year - 1 });
    } else {
        $calendar.calendarWidget({ month: self.calendarDisplayDate.month - 1, year: self.calendarDisplayDate.year});            
    }

}

On my page load I build my calendar div, then I call ko.applyBindings() to my view model and it works. But when I click on the btn that calles my previous month method which needs to redraw calendar according to the right month, knockout stops working. I redraw the whole parent div that holds all the knockout bindings. Does anyone know solution to my problem. I need to redraw the div that has KO bindings inside so maybe what i'm looking for is some kind of bindings refresh method of Knockout ?

I have a situation where I build a div container dynamically that has other html elements inside bonded to my knockout view model. It works up to the point where I call a method on my knockout view model that needs to redraw the whole div. After the redraw knockout stops working.

for example:

 calendar += ('<div class="month-nav-container"><div class="nav-prev" data-bind="click:          $root.showPreviousMonthOnPrevMonthBtnClick" ><<<</div><span class="month-name-calendar">' + monthNames[month] + '</span><div class="nav-next" data-bind="click: $root.showNextMonthOnNextMonthBtnClick" >>>></div></div>');

I build my calendar control like so of course this is just part of it, but I hope you get the general Idea.

my knockout view model method:

self.showPreviousMonthOnPrevMonthBtnClick = function () {
    alert("prev");
    var $calendar = $("#calendar");
    $calendar.empty();

    ////// previous month
    if (self.calendarDisplayDate.month == 0) {
        $calendar.calendarWidget({ month: 12, year: self.calendarDisplayDate.year - 1 });
    } else {
        $calendar.calendarWidget({ month: self.calendarDisplayDate.month - 1, year: self.calendarDisplayDate.year});            
    }

}

On my page load I build my calendar div, then I call ko.applyBindings() to my view model and it works. But when I click on the btn that calles my previous month method which needs to redraw calendar according to the right month, knockout stops working. I redraw the whole parent div that holds all the knockout bindings. Does anyone know solution to my problem. I need to redraw the div that has KO bindings inside so maybe what i'm looking for is some kind of bindings refresh method of Knockout ?

• javascript
• data-binding
• knockout.js

• It's a bit tough to answer your question without a repro. Either way, it sounds slightly dodgy that you have a function redrawing things. A custom binding sounds more like what you need, which might make your problem go away altogether. For example something like this. – Jeroen Commented Sep 17, 2013 at 21:25

2 Answers 2

found solution here:

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

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

and then

 ko.applyBindings(myVieModel, parentDiv)

Make sure your all your html elements that need updated bind to the observable functions ie observablefoo and not observablefoo()