淘汰赛：DOM 直到调整大小才更新答案

【问题标题】：Knockout: DOM not updated until resize淘汰赛：DOM 直到调整大小才更新
【发布时间】：2013-08-14 21:19:31
【问题描述】：

我有一个使用敲除 foreach 语法绑定数据的 div。

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

myData 是一个保存数据的 ObservableArray。我在 myData 上有一个淘汰订阅，如下所示：

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

在 resizeDiv() 函数中，如果所有控件组合的大小大于 div 宽度，我试图从该 div 中删除一些链接并移动到不同的隐藏 div。但问题是此时控件宽度不可用。稍微调整浏览器大小后，控件宽度在 DOM 中刷新。我添加了一个窗口调整大小事件，它调用相同的 resizeDiv() 方法。

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

不确定我是否能够表达我的问题/疑虑。如果您需要任何进一步的信息，请告诉我。

更新： 这是小提琴http://jsfiddle.net/2m3Jk/7/。但是绑定处理程序并没有在小提琴中触发。在我的应用程序中，绑定处理程序正在触发，如果我调整窗口大小，菜单项将从一个 div 移动到另一个 div。但不是在页面加载时。

【问题讨论】：

你能做一个重现问题的小提琴吗？
问题似乎出在 resizeDiv() 内部，但您没有发布它的代码。
这里有小提琴jsfiddle.net/2m3Jk/7

标签： jquery knockout.js resize

【解决方案1】：

如果在渲染过程中与淘汰赛竞争，我不建议您使用纯 javascript 中的 dom 操作。或许你可以使用 afterRender 绑定来调用 resize 函数：http://knockoutjs.com/documentation/template-binding.html#note-4-using-afterrender-afteradd-and-beforeremove

【讨论】：