0

我是淘汰新手，在同一页面上创建多个“喜欢”按钮计数器时遇到问题。

这是我的代码。

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

不确定我需要做什么？

4

1 回答 1

1

您的第一个问题是ko.applyBindings将给定的视图模型应用于整个页面。如果要控制 ViewModel 的应用位置，请将 DOM 节点作为第二个参数传入。您可以在 this fiddle中使用您的代码看到这一点。

ko.applyBindings(new item1(), 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);
    };
};

使用这个可重用的模型，您可以创建一个可爱对象的集合，并将单个上下文绑定到它。你可以在这个小提琴中看到这个

于 2013-02-25T23:41:47.257 回答