嘗試使用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/