“多重”；例如；使用knockout.js在同一页上计数

我是个新手，在同一页面上创建多个“类似”按钮计数器时遇到问题

这是我的密码

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

项目1
喜欢
喜欢


项目2
喜欢
喜欢


var item1=函数（）{
此.numberOfClicks1=ko.可观察（0）；
this.registerClick=函数（）{
this.numberOfClicks1（this.numberOfClicks1（）+1）；
};
};
ko.applyBindings（新的item1（））；
var item2=函数（）{
this.numberOfClicks2=ko.可观察（0）；
this.registerClick=函数（）{
this.numberOfClicks2（this.numberOfClicks2（）+1）；
};
};
ko.applyBindings（新条目2（））；

---

不确定我需要做什么？

您的第一个问题是

ko。applyBindings

将给定的viewmodel应用于整个页面。如果要控制ViewModel的应用位置，请将DOM节点作为第二个参数传入。你可以从你的代码中看到这一点

ko.applyBindings（newitem1（），document.getElementById（“firstNode”）

但是，这假设您想要有多个绑定上下文和单独的视图模型。这就引出了第二个问题：代码重复。通过为喜欢的东西创建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);
    };
};

有了这个可重用的模型，您只需创建一个可爱对象的集合，并将单个上下文绑定到它。您可以在中看到这一点