0

私はノックアウトが初めてで、同じページに複数の「いいね」ボタンカウンターを作成するのに問題があります。

これが私のコードです。

        <ul>
            <li>
              <h4>Item 1</h4>
              <div><span data-bind='text: numberOfClicks1'>&nbsp;</span> likes</div>
              <button data-bind='click: registerClick'>Like?</button>
            </li>
            <li>
              <h4>Item 2</h4>
              <div><span data-bind='text: numberOfClicks2'>&nbsp;</span> likes</div>
              <button data-bind='click: registerClick'>Like?</button>
            </li>
        </ul>


<script type='text/javascript' src='js/knockout-2.2.1.js'></script>

<script type="text/javascript">
    var item1 = function() {
      this.numberOfClicks1 = ko.observable(0);
      this.registerClick = function() {
          this.numberOfClicks1(this.numberOfClicks1() + 1);
      };
    };

    ko.applyBindings(new item1());

    var item2 = function() {
      this.numberOfClicks2 = ko.observable(0);
      this.registerClick = function() {
          this.numberOfClicks2(this.numberOfClicks2() + 1);
      };
    };

    ko.applyBindings(new item2());
</script>

何をする必要があるかわからない？

4

1 に答える 1

1

最初の問題はko.applyBindings、指定されたビューモデルをページ全体に適用することです。ViewModel が適用される場所を制御する場合は、DOM ノードを 2 番目のパラメーターとして渡します。このfiddleで、コードでそれを見ることができます。

ko.applyBindings(new item1(), document.getElementById("firstNode"));

ただし、これは、複数のバインド コンテキストと分離されたビューモデルが必要であることを前提としています。これにより、2 つ目の問題であるコードの重複が発生します。ビューモデルを作成することで、好きなもののコードを再利用可能にすることができます。

var Likeable = function(name) {
    var self = this;
    self.name = ko.observable(name);
    self.likes = ko.observable(0);
    self.like = function() {
        self.likes(self.likes() + 1);
    };
};

この再利用可能なモデルを使用すると、好きなオブジェクトのコレクションを作成し、単一のコンテキストをそれにバインドできます。このフィドルでこれを実際に見ることができます

于 2013-02-25T23:41:47.257 に答える