1

我想知道是否有一种方法可以在不重新渲染 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 的情况下执行此操作。我能想到的唯一其他方法也是构建自己的自定义绑定，但我想避免这种情况。

是否有另一个我可以使用的框架来做到这一点？我听说骨干可能会这样做。

4

2 回答 2

4

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

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

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

于 2013-02-01T21:02:55.690 回答
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>

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

于 2013-02-01T20:55:55.260 回答