尝试使用Knockout.js创建多个计数器

Question

使用此示例，我可以非常容易地创建一个计数器。我如何在一个页面上多次使用它？

<div> 
    You've clicked <span data-bind="text: numberOfClicks"></span> times 
    <button data-bind="click: incrementClickCounter">Click me</button> 
</div> 

<script type="text/javascript"> 
    var viewModel = { 
     numberOfClicks : ko.observable(0), 
     incrementClickCounter : function() { 
      var previousCount = this.numberOfClicks(); 
      this.numberOfClicks(previousCount + 1); 
     } 
    }; 
</script> 

谢谢！

Answer 1

我不确定我是否完全理解您在一页上多次使用这个字词的意思？ 你想让所有的实例共享点击次数，还是应该彼此独立？

如果他们只是分享它，那么你可以将多个元素绑定到相同的点击事件。

<div> 
    You've clicked <span data-bind="text: numberOfClicks"></span> times 
    <button data-bind="click: incrementClickCounter">Click me</button> 
    <button data-bind="click: incrementClickCounter">Click me Too</button> 
</div> 

Answer 2

在这种情况下，您可以使用JavaScript闭包。

function Counter(){ 
    var self = this; 
    self.numberOfClicks = ko.observable(0); 
    self.incrementClickCounter = function() { 
     self.numberOfClicks(self.numberOfClicks() + 1); 
    }; 
} 

var viewModel = { 
    counter1: new Counter(), 
    counter2: new Counter() 
}; 

http://jsfiddle.net/marcandrew/wckE2/