我有一个计数器（产品的数量），我想使用backboneJS自定义事件操作。如果我单击添加产品，那么产品的数量应该增加，如果我单击删除产品，那么产品的数量应该减少一。Demo here问题是，计数器的值没有得到更新，当我单击按钮。这里是代码片段
var Counter = Backbone.Model.extend({
defaults: { value: 10 },
// model methods
increment: function() {
this.set({value: this.get('value')+1});
},
decrement: function() {
this.set({value: this.get('value')-1});
}
});
var cnt = new Counter();
// ------- view -------
var AppView = Backbone.View.extend({
el:'#no_of_products',
render: function() {
this.$el.html(this.model.get('value'));
},
events:{
'click .add-one': 'addOne',
'click .minus-one': 'minusOne'
},
initialize: function() {
this.model.on('change', this.render, this);
this.render();
},
// view methods
addOne: function() {
this.model.increment();
},
minusOne: function() {
this.model.decrement();
}
});
var view = new AppView({ model: cnt });html代码是：
<div id="product_details">
<h1>No of Products:<span id="no_of_products">0</span></h1>
<table>
<tr>
<td>
Add Product
</td>
<td>
: <button class="add-one">+1</button>
</td>
</tr>
<tr>
<td>
Remove Product
</td>
<td>
: <button class="minus-one">- 1</button>
</td>
</tr>
</div>
2条答案
按热度按时间eqqqjvef1#
下面是一个工作示例：https://codepen.io/tilwinjoy/pen/OJPyNbR?page=1&
几乎没有什么问题：
1.你试图绑定事件的元素必须在视图的内部。在你的例子中，视图元素只是一个
<span>，所有的东西都在外面。l7wslrjt2#
下面的代码将修复测试用例的问题，但是，如果在浏览器中运行它，它将不起作用，但是谁在乎这是否有助于清除测试;）只是修改了代码以清除测试用例。