将 knockoutjs 连接到已填充的 DOM 元素

Question

我正在开发一个页面，该页面是 ASP.NET MVC3 应用程序的服务器，我想在其中使用 KnockoutJS。

在视图上，我传递了一个填充模型（我将其转换为 KnockoutJS viewModel），然后我想要在服务器端构建一些 DOM。这似乎是合乎逻辑的，因为我已经在那里拥有了生成初始 HTML 的对象，并且它将为用户提供更好的体验，因为页面加载和 DOM 填充之间不会有延迟（这也意味着我拥有非-JavaScript 客户端）。

经过一些研究后，我假设我需要创建一个自定义 bindingHandler 所以我创建了这个：

ko.bindingHandlers.serverForEach = {
    init: function() { /* no-op */ },
    update: function() {
        //call off to the built in loop handler
    }
};

所以我的想法是我创建一个在 init 阶段不执行任何操作的处理程序（因为 DOM 已经填充）并且在更新阶段我将插入新值。我想利用内置模板，因此这也可以成为通用解决方案。

问题是在这种情况下一切都会崩溃。如果 init 不执行任何操作，则 update 会失败，因为最后一个参数传入的 bindingContext 似乎是错误的，并且如果我包含 init，它将破坏现有的 HTML。

有人尝试过这个/知道我应该做什么来支持这种情况，还是它与你可以/应该做的事情相去甚远？

另外，我不想为服务器生成的 HTML 使用与 Knockout HTML 不同的单独 DOM 元素。

Answer 1

我想我明白你的问题是什么。您希望最初为非 js 用户填充标记，并在绑定到 KO 时简单地覆盖它。

对于像文本这样的简单绑定，这不是问题，只需将数据绑定属性包含在服务器的标记中，或者在运行时包含即可。对于模板 foreach 绑定来说，事情有点困难，因为它会在绑定时附加值。

这里有一个jsfiddle，它描述了上述场景并演示了下面的解决方案。这有点基础，但应该可以帮助您入门。

基本思想是在 init 上清除元素，然后将其余部分委托给现有模板绑定。

ko.bindingHandlers.serverForEach = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        // clear the list first
        $(element).children().remove();
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        ko.bindingHandlers['template'].update(element, valueAccessor, allBindingsAccessor, viewModel);
    }
};

希望这有帮助。

Answer 2

如果有人需要这个来为 knockout.js 2.0+ 工作（请注意更新中的 bindingContext）

ko.bindingHandlers.serverForEach = {
init: function(element, valueAccessor) {
        $(element).children().remove();
        return ko.bindingHandlers.template.init(element, valueAccessor);
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        return ko.bindingHandlers.template.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
    }
};