Knockout: DOM not updated until resize

Question

I have a div which is data bound using knockout foreach syntax.

<div id="myDiv" data-bind="foreach: { data: myData }, myCustomBinding: { param: paramname }">
     <a id="myLink" class="myLink" data-bind="text: label"></a>
</div>

myData is an ObservableArray which holds the data. I have a knockout subscribe on myData as follows:

myData.subscribe(function () {
if (myData().length > 0) {
     resizeDiv();
 }
});

In the resizeDiv() function I am trying to remove a few links from this div and move to a different hidden div if the size of all the controls combined is greater than the div width. But the problem is the controls width is not available at this moment of time. The control width is refreshed in the DOM after slightly resizing the browser. I have added a window resize event which calls the same resizeDiv() method.

$(window).on('resize', function () {
   resizeDiv();
});

Not sure if I was able to convey my issue/concern. Please let me know if you need any further information.

Update: Here is the fiddle http://jsfiddle.net/2m3Jk/7/ . But the binding handler is not firing in the fiddle. In my application the binding handler is firing and the menu items are moving from one div to another if I resize the window. But not on page load.

It seems like the problem is inside of resizeDiv(), but you didn't post the code for it. — scaryman

jparaya jparaya · Accepted Answer · 2014-08-04T00:51:40

I don't recommend you to use dom manipulation from plain javascript if it's competing with knockout in the rendering process. Maybe you can use the afterRender binding to call the resize function: http://knockoutjs.com/documentation/template-binding.html#note-4-using-afterrender-afteradd-and-beforeremove

Knockout: DOM not updated until resize

1 Answers