title: Knockout: DOM not updated until resize
body: <p>I have a div which is data bound using knockout foreach syntax. </p>
  
  <pre><code>&lt;div id="myDiv" data-bind="foreach: { data: myData }, myCustomBinding: { param: paramname }"&gt;
       &lt;a id="myLink" class="myLink" data-bind="text: label"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>myData is an ObservableArray which holds the data. I have a knockout subscribe on myData as follows:</p>
  
  <pre><code>myData.subscribe(function () {
  if (myData().length &gt; 0) {
       resizeDiv();
   }
  });
  </code></pre>
  
  <p>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. </p>
  
  <pre><code>$(window).on('resize', function () {
     resizeDiv();
  });
  </code></pre>
  
  <p>Not sure if I was able to convey my issue/concern. Please let me know if you need any further information. </p>
  
  <p><strong>Update:</strong>
  Here is the fiddle <a href="http://jsfiddle.net/2m3Jk/7/" rel="nofollow">http://jsfiddle.net/2m3Jk/7/</a> . 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.</p>