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

在这种情况下，您可以使用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/

Answer 2

我不确定我在一个页面上多次使用这个是什么意思？您是否希望所有实例共享点击的次数或彼此独立？

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

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

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

2 个答案: