Question

我正在使用淘汰赛js完成一个单页的Web应用程序。

许多页面都可以直接访问（内部使用pushstate来处理导航等），并且服务器将构造相同的内容，以便预先填充这些页面。

尽管不是关键任务，但对于敲除的用户来说，最好不要在页面绑定到用户输入的任何页面的数据时重绘页面，但是在将来更新可观察对象时仍然是交互式的。

例如，登录页面的剔除视图中可能有一个列表：

//empty on landing page load
view.items = ko.observableArray();

<ul data-bind="foreach: items">
    <li data-bind="text:$data"></li>
</ul>

然后，用户单击某处的“水果”链接，然后通过ajax更新项目：

view.items(["apple", "banana", "orange"]);

到目前为止，非常标准的用法。

但是，如果用户直接进入“水果”页面怎么办？当前，我在页面加载时填充了view.items数组，该数组有效。但是现在我也希望服务器提供正确的HTML。因此，“水果”页面不仅设置了初始view.items，而且还预先渲染了该列表：

//pre-set items list observable
view.items = ko.observableArray(["apple", "banana", "orange"]);

//server-side pre-rendered items list
<ul data-bind="foreach: items">
    <li data-bind="text:$data">apple</li>
    <li data-bind="text:$data">banana</li>
    <li data-bind="text:$data">orange</li>
</ul>

我要避免的是在页面加载时敲除重绘列表，但是由于view.items数组可能随时更改，因此我需要使列表保持绑定状态。

我希望文档中缺少一些内置的东西。如果是这样的话，欢迎提出权威的“这不是无关紧要的”答案。

Answer 1

foreach绑定将其绑定元素的内容用作template。如果您采用当前的方法，则可以渲染9种水果。

我建议改用template绑定。这样，初始内容就只是一个占位符。应用绑定后，会将其从DOM中删除。

您链接的template仅包含一个水果的列表项。 \

下面是一个在2秒后绑定UI的示例。如您所见，当剔除取代列表内容时，UI不会发生明显变化。

setTimeout(
  function() {
    ko.applyBindings({ items: [ "banana", "apple", "orange" ] });
  },
  2000
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="template: { name: 't-fruit-li', foreach: items }">
    <li>banana</li>
    <li>apple</li>
    <li>orange</li>
</ul>

<p data-bind="visible: false">Waiting for apply bindings...</p>

<script id="t-fruit-li" type="text/html">
  <li data-bind="text: $data"></li>
</script>

防止敲除重绘初始状态

1 个答案: