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. — Jeroen
– Jeroen, Commented Sep 17, 2013 at 21:25

Community · Accepted Answer · 2017-05-23 12:08:47Z

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)

Nikos · Accepted Answer · 2013-09-17 21:10:22Z

0

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

answered Sep 17, 2013 at 21:10

Nikos

7,60111 gold badges59 silver badges97 bronze badges

1 Comment

Alan Budzinski Over a year ago

I have it like that, but this is not the cause of the problem

Collectives™ on Stack Overflow

Rebind knockout js when I need to redraw html with bindings

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related