Простой пример магистральная не обновляя вид

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 с функцией добавления, но почему-то это не работает.

Так что, я думаю, я делаю что-то неправильно или просто не хватает привязки?

EDIT: Фиксированный, как предложил это ... до сих пор не работает:

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

EDIT: FIXED И РАБОТА

<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

И обновите свой метод визуализации

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

Answer 2

модели Backbone должны иметь свои данные манипуляции через 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().