Несколько «похожих» счетчиков на одной странице с помощью 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, перейдите в узел 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