0

これは興味深いもので、同じことを考えた人や実装した人がいるのだろうかと考えています。

私のシナリオ:

<div>最初の読み込み時に一連のタグを作成したい、監視可能な配列があります。簡単に、Knockout がこれをやってくれます。ただし、ボタンがクリックされた後、別の結果セットを再レンダリングするのではなく、同じ 要素にロードしたいと思います (物事の外観によるノックアウトのデフォルト動作)。<div>

そのような：

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

** 2 回目のロード **

<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

2回目のロードで欲しいもの...

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

何か案は？DOM でを再作成するのではなく、パフォーマンスを向上させるためにそれを実行しようとしてい<div>ます。単にそこにあるものを再利用したいだけです。

4

1 に答える 1

3

Knockout のforeachロジックは、新しいアイテムが現在のアイテムと同じ内容を持っていることを知りません。

同じデータ オブジェクトを保持し、textプロパティにオブザーバブルを使用textし、既存のアイテムを更新した場合、要素は保持され、要素の innerText/textContent が更新されます。

したがって、変更されるプロパティにはオブザーバブルを使用する必要があります。

于 2013-07-05T16:12:32.280 に答える