2011-08-11 5 views
0

Backbone.jsを使い始めましたが、html要素の更新に問題があります。リストの幅から項目を更新するBackbone.js

ルータ:

App.Routers.Test = Backbone.Router.extend({ 

    routes: { 
     "/start" :  "start", 
     "/modify" :  "modify" 
    }, 

    start: function() { 

     this.List = new App.Collections.Test; 
     this.ViewList = new App.Views.Test({model: this.List}); 

     this.List.fetch(); 

    }, 

    modify: function() { 
     var model = this.List.get(1); 
     model.set({name: 'Item modified'}); 
     alert('Modified!'); 
    } 

}); 

再生回数: は、これは私のコードです

App.Views.Item = Backbone.View.extend({ 

    inizialize: function() { 
     this.model.bind('change:name',this.render); 
    }, 

    render: function() { 
     $('#tmpl').tmpl(this.model.attributes).appendTo(this.el); // jQuery Template 
     return this; 
    } 

}); 

App.Views.Test = Backbone.View.extend({ 

    el: '#list', 

    initialize: function() {        
     _.bindAll(this, 'render');   
     this.model.bind('reset', this.render);   
    }, 

    render: function() { 
     $(this.el).empty(); 
     this.model.each(function(model) { 
      var viewItem = new App.Views.Item({model: model}); 
      $('#list').append((viewItem.render().el)); 
     });  
    } 



}); 

私はモデルが変更された "#/変更" に進みますが、これはHTMLビューに更新されません私はアイテムビューにこのコードを追加しましたが、

this.model.bind('change:name',this.render); 

多分私は正しいことを理解していませんバックボーンの機能、どのように行動するのですか?

PS:私はバックボーンで新しいので、アドバイスを受け入れます。

答えて

0

modifyメソッドでは、適切なビューを呼び出します。私は通常modelelのインスタンスを渡します。ですから、例えば:

this.modifyPage = new App.Views.Test({ 
    el: $('#list'), 
    model: model 
}); 

けれども、あなたはそれが唯一のビューにjQueryのの使用を制限することをお勧めします、ルータからコンテキストとしてelを必要としない場合。

関連する問題