1

我开始用这个简单的例子来学习 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($)

因此，当按下“添加”按钮时，计数器应该会增加并且视图应该会更新。我已经绑定了视图和模型，并将点击事件与添加功能链接起来，但不知何故这不起作用。

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

编辑：已按照建议修复...仍然无法正常工作：

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

3 回答 3

5

按钮必须是视图的后代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;
}
于 2012-04-04T13:11:41.387 回答
0

骨干模型必须通过getandset方法处理其数据，而不是作为常规的 javascript 对象。尝试

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

或者更好的是，increment向您的模型类添加一个方法，该方法通过更好的封装来更新get属性set。

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

于 2012-04-04T12:48:14.393 回答
0

我认为你的错误是一个简单的 javascript 错误。在add你需要调用this.render()不只是render()。

于 2012-04-04T12:50:10.783 回答