javascript - 主干js中的数据绑定(bind)

Question

场景:我在一个集合中有多个模型，每个模型都有一个 View ，并且该集合有一个父 View 。

HTML Handlebars 模板:

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

模型 View 的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});
    }
 },

因此，这可以根据点击设置适当的模型属性，另一个灵 active 是消除不同新闻报道的 ID。 View 中的多个新闻项具有相同的类名，基于单击，我可以访问单击的模型按钮并执行更改和重新渲染。

但是，与 Angular JS 不同的是，DOM 操作不会影响数据和 Controller 的绑定(bind)，在这种情况下，操作类名或互换类名将直接影响对象中的数据(当然还有更改)发送到服务器)。 Backbone 中可以防止这种情况吗？

我是 Backbone 的初学者，因此在 Backbone 中搜索数据绑定(bind)的结果是 epoxy和 stickit 。这两个选项都使用 ID 来进行数据绑定(bind)。我需要在没有 ID 的情况下完成数据绑定(bind)，因为 ID 是唯一的。

Answer 1

我在 Google 群组中找到了问题的答案。不过想在这里分享一下答案，以帮助SO社区的 Backbone 用户获得正确的理解:

解决方案:Mickey's solution

应用类进行识别:

<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);
},

这里的重要概念是理解:这些是不同的方法(如果比较 Angular 和 Backbone)——在 HTML 中显式添加指令与保留模板中的逻辑并在 View 对象中不显眼地附加处理程序。

这回答了我的问题。