简单的骨干例如没有更新的观点

Question

我开始学习骨干用这个简单的例子：当“添加”按钮被按下

<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()。