多個「喜歡」的計數器在同一頁上使用knockout.js

Question

我是新來淘汰賽，並有問題在同一頁上創建多個「喜歡」按鈕計數器。

這是我的代碼。

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

不知道我需要做什麼？

Answer 1

你第一個問題是ko.applyBindings將給定的viewmodel應用於整個頁面。如果要控制ViewModel的應用位置，請傳入DOM節點作爲第二個參數。你可以在你的代碼中看到fiddle。

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

然而，這種假設你想有多個結合上下文和分隔的ViewModels。這給我們帶來了第二個問題：代碼重複。你可以通過爲它創建一個Viewmodel來使你的代碼可以重用。

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); 
    }; 
}; 

有了這個可重複使用的模型，您可以創建一個類似對象的集合，並將一個上下文綁定到它。你可以在this fiddle