jquery - 我可以使用尚未注入(inject) DOM 的元素调用 Knockout 的 ko.applyBindings 吗？

Question

我的问题很简单。下面的代码似乎工作得很好(点击 here 查看工作 fiddle )，实际上是 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 之前将所有绑定(bind)应用到 HTML，因此您不会在看到空 HTML 时出现这种效果绑定(bind)生效前的短暂一秒。有什么理由不这样做？

Answer 1

Knockout 中有与绑定(bind)中使用的计算可观察量相关的处理逻辑，当它认为某个元素不再是 DOM 的一部分时，将运行该逻辑。在您的情况下，您可能会无意中触及此逻辑，并且绑定(bind)可能会被释放。

下面是一个示例，您将一个元素绑定(bind)到一个 observable，然后该 observable 将作为 select 元素上的 value 绑定(bind)的一部分进行更新。 http://jsfiddle.net/rniemeyer/X8RVP/4/

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

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

命名模板有助于您永远不会看到"template"被渲染，就像使用控制流绑定(bind)(if、with、 >foreach)，甚至只是带有绑定(bind)的普通元素。它不一定能阻止您试图阻止的问题，但它绝对可以提供帮助，因为绑定(bind)将在元素添加到 DOM 时立即发生。考虑一下这个带有命名模板的模板:http://jsfiddle.net/rniemeyer/X8RVP/5/与没有 http://jsfiddle.net/rniemeyer/X8RVP/6/ 的这个相比。在 setTimeout 中应用绑定(bind)来模拟页面加载和 DOM 准备中的一些延迟。