数据绑定在主干js上
场景：我在一个集合中有多个模型，每个模型都有一个视图，集合有一个父视图。
HTML的手柄模板：
<div id="contentarea">
<div class="news">
<div> {{ModelItem.text}} </div>
<span>Number of likes: {{ModelItem.likes}} </span>
<span>Number of dislikes: {{ModelItem.dislikes}} </span>
<div class="btn-group">
<button class="btn btn-default"> I Like this </button>
<button class="btn btn-default"> I hate this </button>
</div>
</div>
</div>
模型视图的BackBone脚本：
var newsMV = Backbone.View.extend({
tagName : "div",
className : "news",
initialize : function(){
this.listenTo(this.model, 'change', this.render);
},
events: {
"click .btn-default" : "clicked"
},
template : Handlebars.compile($('#item-template').html()),
clicked: function(e){
e.preventDefault();
// Incrementing like or dislike attribute based on button
// Setting the attribute in Model to trigger a change event
},
render: function(){
var output = this.template({'ModelItem':this.model.toJSON()});
this.$el.html(output);
return this;
}
});
现在，从名称可以看出，点击“我喜欢这个”按钮必须增加ModelItem.likes属性，点击“我讨厌这个”按钮必须增加ModelItem.dislikes的数量。 我尝试过的一些事情是使用额外的类名作为标识符：
<button class="btn btn-default btn-like"> I Like this </button>
<button class="btn btn-default btn-dislike"> I hate this </button>
现在，在clicked（）中，我可以使用简单的jQuery：
clicked: function(e){
e.preventDefault();
if(e.currentTarget.hasClass('btn-like')){
var like_count = this.model.get("likes");
this.model.set({likes:++like_count});
}
else if(e.currentTarget.hasClass('btn-dislike')){
var dislike_count = this.model.get("dislikes");
this.model.set({dislikes:++dislike_count});
}
},
因此，这可以基于点击设置适当的模型属性，另一个灵活性是消除不同新闻报道的ID。 使用与视图中多个新闻项目相同的类名称，基于点击，我可以访问单击的模型按钮并执行更改并重新渲染。
然而，不同于Angular JS，DOM操作不会影响数据和控制器的绑定，在这种情况下，操作类名或相互更改类名将直接影响对象中的数据（当然，这些更改会发送到服务器）。 这可以在Backbone中防止吗？
我是骨干网的初学者，因此在骨干网上进行数据绑定的搜索结果产生了环氧树脂和粘性的结果。 这两个选项都使用ID来进行数据绑定。 由于ID是唯一的，我需要完成没有ID的数据绑定。
我在谷歌组合中为我的问题得到了答案。 然而，为了帮助SO骨干用户社区获得正确的理解，希望在此分享答案：
解决方案：米奇的解决方案
应用课堂进行身份识别：
<button class="btn btn-default js-likes"> I Like this </button>
<button class="btn btn-default js-dislike"> I hate this </button>
观察相应点击的事件：
events: {
"click .js-likes": "updateLikesCounter",
"click .js-dislike": "updateDislikesCounter",
...
},
基于相应的按钮点击更新：
updateLikesCounter: function() {
this.model.set("likes", this.model.get("likes") + 1);
},
updateDisikesCounter: function() {
this.model.set("dislikes", this.model.get("dislikes") + 1);
},
这里的重要概念是理解：这些是不同的方法（如果比较角度和骨干） - 明确地在HTML中添加指令，而不是在模板中清除逻辑并将处理程序不显眼地附着在视图对象中。
这就回答了我的问题。
链接地址: http://www.djcxy.com/p/53371.html