Rebind knockout js when I need to redraw html with bindings

Question

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 ?

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](http://stackoverflow.com/questions/6612705/knockout-with-jquery-ui-datepicker). — Jeroen, Sep 17 '13 at 21:25

score 20 · Accepted Answer · edited May 23 '17 at 12:08

20

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)

edited May 23 '17 at 12:08

Community

1
1

answered Sep 17 '13 at 22:40

Alan Budzinski

811
3
16
33

score 0 · Answer 2 · answered Sep 17 '13 at 21:10

0

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

answered Sep 17 '13 at 21:10

Nikos

7,295
7
52
88

I have it like that, but this is not the cause of the problem – Alan Budzinski Sep 17 '13 at 21:13

Rebind knockout js when I need to redraw html with bindings

2 Answers2