Question

这是一个有趣的问题，想知道是否有人认为相同或已实施它。

我的情景：

我有一个可观察的数组，在第一次加载时，我想创建一堆<div>标记。很容易，Knockout为我做了这个。但是，单击一个按钮后，我想将另一组结果加载到相同的 <div>元素中，而不是重新渲染它们（根据事物的外观敲除默认行为）。 / p>

如：

function viewModel() {
     var self = this;

    self.testArray = ko.observableArray([]);

    self.loadMore = function () {
       var length = self.testArray().length;

       if (length > 0) {
          console.log('loading into divs');
          // Load into original <div>'s
          // This is deleting the old <div>'s from the DOM and creating new ones...
          // How can I just replace the original <div> content for performance gains?
            for (var i = 0; i < 10; i++) {
                   self.testArray.replace(self.testArray()[i], new { text: 'New Text' });
            }
      }
      else {
           // Create the <div>'s by pushing items to the array
           for (var i = 0; i < 10; i++) {
                self.testArray.push(ko.observable(new { text: 'New Text' }));
           }
      }
   };
}

var model = new viewModel();
model.loadMore();
ko.applyBindings(model);

<!-- ko foreach: testArray -->
      <div data-bind="text: text"></div>
<!-- /ko -->

<button data-bind="click: loadMore">Next</button>

更容易理解......

**首次加载**

<div></div> - created
<div></div> - created
<div></div> - created
<div></div> - created
<div></div> - created

**第二次加载**

<div></div> - deleted
<div></div> - deleted
<div></div> - deleted
<div></div> - deleted
<div></div> - deleted
<div></div> - created
<div></div> - created
<div></div> - created
<div></div> - created
<div></div> - created

我想要第二次加载......

<div></div> - edited
<div></div> - edited
<div></div> - edited
<div></div> - edited
<div></div> - edited

有什么想法吗？我正在努力提高性能，而不是在DOM中重新创建<div>，我只想重新使用那里的那些。

Answer 1

Knockout的foreach逻辑不知道您的新项目与当前项目具有相同的内容。

如果你保留了相同的数据对象，使用了text属性的observable，那么只更新现有项目的text，元素将被保留，元素的innerText / textContent将是更新。

因此，您可能希望将observable用于任何更改的属性。

Knockout JS - 阵列替换，同时保持相同的元素

1 个答案: