Question

我开始用这个简单的例子学习Backbone：

<div id="counter">unkown</div>
<button id="add-button">ADD</button>

(function($){

   var Counter = Backbone.Model.extend({
     defaults: {
        count: 0            
     }
   });

   var CounterView = Backbone.View.extend({
       el: "#counter",

       events: {
            "click #add-button": "add"
       },

       add: function() {
           this.model.count++;
           render();
       },

       render: function() {
           $(this.el).text(this.model.get("count"));
           return this;
       },

       initialize: function(){              
           this.render();
       }
   });

   var counterItem = new Counter();
   var counterView = new CounterView({model: counterItem});              

}(jQuery));  // function($)

因此，当按下“添加”按钮时，计数器应该增加，视图应该更新。我已经绑定了视图和模型，并将click事件与add函数链接，但不知怎的，这不起作用。

所以我猜我做错了什么或者我只是缺少一些约束力？

编辑：根据建议修正...仍然无效：

<div class="list">
        <div id="counter">unkown</div>
        <button id="add-button">ADD</button>
</div>  

    (function($){

       var Counter = Backbone.Model.extend({
         defaults: {
            count: 0            
         }
       });

       var CounterView = Backbone.View.extend({
           el: "#counter",

           events: {
                "click #add-button": "add"
           },

           add: function() {
               alert("ADD");
               this.model.set("count", this.model.get("count") + 1);
               this.render();
           },

           render: function() {
               $(this.el).text(this.model.get("count"));
               return this;
           },

           initialize: function(){               
               this.render();
           }
       });

       var counterItem = new Counter();
       var counterView = new CounterView({model: counterItem});                     

    }(jQuery));  // function($)

编辑：修复和工作

<div id="counterHolder">
        <div id="counter">
            <span>unknown</span>
           <button id="add-button">ADD</button>
       </div>
    </div>

    <script>


    (function($){

       var Counter = Backbone.Model.extend({
         defaults: {
            count: 0            
         },

         increase: function(){
             this.set("count", this.get("count") + 1);
         }
       });

       var CounterView = Backbone.View.extend({

           el: "#counter",

           events: {
                "click #add-button": "add"
           },

           add: function() {
               this.model.increase();               
           },

           render: function() {
               $("#counter span").text(this.model.get("count"));
               return this;
           },

           initialize: function(){
               this.render = _.bind(this.render, this); 
               this.render();
               this.model.bind('change:count', this.render);
           }
       });

       var counterItem = new Counter();
       var counterView = new CounterView({model: counterItem});                     

    }(jQuery));  // function($)

    </script>

Answer 1

该按钮必须是视图el

的后代

更新您的html，如下所示，它应该可以正常工作

<div id="counter">
  <button id="add-button">ADD</button>
</div>

如果您仍想显示计数，请添加其他span

<div id="counter">
  <span id="count" />
  <button id="add-button">ADD</button>
</div>

并更新您的渲染方法

render: function() {
  this.$('#count').text(this.model.get("count"));
  return this;
}

Answer 2

骨干模型必须通过get和set方法操作数据，而不是常规javascript对象。尝试

this.model.set("count", this.model.get("count") + 1);

或者更好的是，向模型类添加increment方法，通过get和set更新属性，以便更好地进行封装。

此外，只是关于约定的注释，通常视图更改或绑定的每个DOM都应包含在父el元素中。您的视图绑定到视图的父div中未包含的添加按钮。它似乎有效，但它基本上是事件处理相当于一个全局变量。

Answer 3

我认为你的错误是一个简单的javascript错误。在add中，您需要致电this.render()而不仅仅是render()。

简单的骨干示例不更新视图

3 个答案: