我可以用尚未注入DOM的元素调用Knockout的ko.applyBindings吗？

Question

我的问题很简单。下面的代码看起来工作得很好（单击此处查看一个工作的小提琴），实际上是对ko.applyBindings的有效使用吗？或者是否存在可能出现的副作用和/或问题？

var viewModel = {
    sampleText: ko.observable('hello world!')
};
// this HTML would be loaded from the server
var htmlWithBindings = '<b data-bind="text: sampleText"></b>';
var jQueryObj = $(htmlWithBindings);
ko.applyBindings(viewModel, jQueryObj.get(0));
$('#main').append(jQueryObj); 

这种方法的好处是，在实际将HTML添加到DOM之前，您可以将所有绑定应用到，因此在绑定生效之前，您不会看到短暂的空HTML。有什么理由不这么做吗？

Answer 1

Knockout中存在与绑定中使用的计算可观察性相关的处置逻辑，当它认为某个元素不再是DOM的一部分时，该绑定将运行。在您的情况下，您可能会无意中命中此逻辑，绑定可能会被丢弃。

这里有一个例子，您将一个元素绑定到一个可观察对象，然后该可观察对象作为select元素上value绑定的一部分进行更新。http://jsfiddle.net/rniemeyer/X8RVP/4/

经过进一步的研究，我不认为你的技术一定会在每种情况下都失败，但我会意识到上面列出的事情。

您可以选择在应用绑定时隐藏元素，或者对主要部分使用命名模板（在脚本标记中），这样在绑定元素之前就不会显示这些元素。

命名模板的帮助在于，您永远不会看到您的"模板"像使用控制流绑定（if、with、foreach）甚至只是具有绑定的普通元素那样被渲染。它不一定能防止您试图防止的问题，但它肯定会有所帮助，因为绑定将在元素添加到DOM时立即发生。考虑一下这个带有命名模板的模板：http://jsfiddle.net/rniemeyer/X8RVP/5/与没有http://jsfiddle.net/rniemeyer/X8RVP/6/.绑定在setTimeout中应用，以模拟页面加载和DOM准备过程中的一些延迟。