Data binding Knockout.js应用绑定而不重新排序

我想知道是否有一种方法可以在不重新呈现DOM元素的情况下将绑定应用于某些DOM元素

我这样问是因为在我的情况下，服务器会返回带有Razor模板的HTML构建。因此后端处理所有DOM构建

我所要做的就是使用一个健壮的JS库，比如Knockout.JS，获取一个完全呈现的标记并对其应用某种绑定。这有可能吗

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

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

<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>

这将导致如下结果：

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

<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的情况下执行此操作。我唯一能想到的另一种方法是构建自己的自定义绑定，但我希望避免这种情况

---

我是否可以使用另一个框架来实现这一点？我听说主干网可以做到这一点。

听起来你在混合各种方法，结果会有点混乱。话虽如此，如果您真的想这样做来简化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>

---

它是丑陋的，因为它是：-最好的答案是请考虑一种不同的方法。

< P>听起来好像你在混合方法，这会有点混乱。话虽如此，如果您真的想这样做来简化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>

---

这是很难看的，因为它是：-最好的答案是请考虑一个不同的方法。

< P>正如一些其他的回答者所说的，我认为你最好用不同的方式做这件事。如果您希望避免Ajax调用获取数据的额外服务器往返，那么可以让服务器呈现表示数据的JSON字符串，并将其与HTML模板一起嵌入到HTML中

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

---

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

正如其他一些受访者所说，我认为最好采用不同的方式。如果您希望避免Ajax调用获取数据的额外服务器往返，那么可以让服务器呈现表示数据的JSON字符串，并将其与HTML模板一起嵌入到HTML中

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

---

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

如果服务器已经返回了您需要的html，为什么需要绑定任何内容？你想在这里实现什么？因为我想操纵模型。假设我有一个按钮，可以向模型数组添加一个结果，我希望通过某种绑定将其反映在DOM中。所以服务器确实返回了我需要的HTML，但我可能需要进一步更改。更现实的使用情况是，一些排序历史小部件将在整个站点中持续存在，但随着用户交互和添加到历史记录中而更新。那么，让Knockout重建DOM有什么错呢？我实际上可以让Knockout重建DOM重建DOM，但我希望完全呈现的HTML有搜索引擎优化的目的。如果我的标记没有加载，它将不会被SEO筛选。如果服务器已经返回了你需要的html，为什么你需要绑定任何东西？你想在这里实现什么？因为我想操纵模型。假设我有一个按钮，可以向模型数组添加一个结果，我希望通过某种绑定将其反映在DOM中。所以服务器确实返回了我需要的HTML，但我可能需要进一步更改。更现实的使用情况是，一些排序历史小部件将在整个站点中持续存在，但随着用户交互和添加到历史记录中而更新。那么，让Knockout重建DOM有什么错呢？我实际上可以让Knockout重建DOM重建DOM，但我希望完全呈现的HTML有搜索引擎优化的目的。如果我的标记没有加载，它将不会被SEO筛选。服务器端呈现所有HTML的主要目的是为了SEO。我可以通过jQuery轻松删除一些DOM元素，然后用Knockout重新填充它

---

乌尔波斯斯。我可以通过jQuery轻松删除一些DOM元素，然后用Knockout重新填充它。我要求后端开发人员做的是返回HTML标记以及包含JSON中C模型表示的脚本块。然后，JSON被Knockout使用。我要求我的后端开发人员做的是返回HTML标记以及包含JSON中C模型表示的脚本块。然后，JSON被Knockout使用。这样我可以操纵我的模型。