多个“喜欢”的计数器在同一页上使用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