Question

我想知道是否有办法在不重新渲染DOM元素的情况下对某些DOM元素应用绑定。

我问，因为在我的情况下，服务器正在使用Razor模板返回HTML构建。所以后端处理所有DOM构建。

我想做的就是使用一个完整的渲染标记，并使用强大的JS库（如Knockout.js）对其应用某种绑定。这一切都是可能的。

因此，例如在普通客户端构建的标记中，我会做这样的事情：

<ul data-bind="foreach: fruits">
    <li data-bind="text: name"></li>
</ul>

然后应用绑定并构建html。

ko.applyBindings(new ViewModel(data));

这将导致类似这样的事情：

<ul data-bind="foreach: fruits">
    <li data-bind="text: name">Apples</li>
    <li data-bind="text: name">Pairs</li>
    <li data-bind="text: name">Banana</li>
    <li data-bind="text: name">Peaches</li>
    <li data-bind="text: name">Grapes</li>
</ul>

但是使用Razor模板已经像这样返回HTML，但我仍然想要应用绑定。如何在不重新渲染html的情况下执行此操作。我能想到的唯一另一种方法是构建我自己的自定义绑定，但我想避免这种情况。

我可以使用另一个框架吗？我听说骨干可能会这样做。

Answer 1

正如其他一些受访者所说，我认为你最好不要这样做。如果您宁愿避免额外的服务器往返Ajax调用来获取数据，您可以让服务器呈现代表您的数据的JSON字符串，并将其嵌入HTML中与HTML模板一起。

然后，您可以使用JSON.parse将此字符串解析为JSON树，并将这些值绑定到视图模型构造函数中的视图模型中。

通过这种方式，您可以获得从服务器返回数据作为响应的一部分的性能提升，但不会使Knockout弯曲变形。作为额外的好处，将AJAX行为添加到例如更新此数据变得更加容易。

Answer 2

听起来你正在混合方法，这将最终有点混乱。话虽如此，如果你真的想要这样做以简化DHTML等，那么我建议你不要试图将foreach绑定融入到提供的标记中，让你的模型反映服务器 - 方提供了模型。粗略的例子：

var model = {
   fruits: {
      apple: { name: ko.observable('Apples') },
      pairs: { name: ko.observable('Pairs') },
      banana: { name: ko.observable('Banana') },
      peaches: { name: ko.observable('Peaches') },
      grapes: { name: ko.observable('Grapes') },
   }
}

<ul data-bind="with: fruits">
    <li data-bind="text: apple.name">Apples</li>
    <li data-bind="text: pairs.name">Pairs</li>
    <li data-bind="text: banana.name">Banana</li>
    <li data-bind="text: peaches.name">Peaches</li>
    <li data-bind="text: grapes.name">Grapes</li>
</ul>

这很难看，因为它是:-)最好的答案是请考虑采用不同的方法。

Knockout.js应用绑定而不重新渲染

2 个答案: