1

ナビゲーションとレイアウト管理にルーターを使用していますが（そうです！？）、問題が発生しているようです。

backboneQuote.Routers.ApplicationRouter = Backbone.Router.extend({

routes: {
    "" : "home",
    "edit/:id": "quoteEdit"
},

initialize: function(){
    this.headerView = new backboneQuote.Views.headerView();
    $('.header').html(this.headerView.render().el);

    if(!this.itemsView){
        this.items = new backboneQuote.Collections.ApplicationCollection([
            {id: 1, name: "item 1"},
            {id: 2, name: "item 2"},
            {id: 3, name: "item 3"}
        ]);

        this.itemsView = new backboneQuote.Views.itemsView({collection: this.items});
    }
    this.content = $('.container');
},

home: function(){

    this.content.html(this.itemsView.render());

},

quoteEdit: function(id){
    this.editQuoteView = new backboneQuote.Views.editQuoteView({model: this.items.where({id: parseInt(id, 10)})});
    $('#editQuote').html(this.editQuoteView.render().el);
    this.content.html($('#editQuote').html());
}

}）;

私のitemsViewレンダリングのもの：

renderItem: function(model){
    var itemView = new backboneQuote.Views.itemView({model: model});
    itemView.render();
    $(this.el).append(itemView.el);
    return this;
},

render: function(){
    this.collection.each(this.renderItem);
},

アプリを「ホーム」機能に戻す要素をクリックしましたが（クリックイベントは正常に発生しています）、「this.itemsView」のコンテンツが「this.content」divに戻されないようです。誰かがここで何か間違ったことを見つけることができますか？

別の大規模なヘルプとして、誰かがここで見たものについて全体的なBackboneJSの知恵を提供できれば、それは大規模なヘルプになります。

4

1 に答える 1

2

通常、バックボーンアプリでrenderは、ビューのコンテンツを設定するメソッドを記述しますel。が正しい場所に表示されるようrenderにするために呼び出すコードの責任です。el

ルーターでは、

home: function(){

    this.content.html(this.itemsView.render());

},

.el プロパティにアクセスしていません。最初の修正は、そこにそれを追加することです。

home: function(){

    this.itemsView.render();
    this.content.html(this.itemsView.el);

},

elこれは、コレクションビューにプロパティがあり、バックボーンビューにはデフォルトである傾向があることを前提としています。

thisこれがそのような一般的なタスクであることを考えると、慣例は各ビューrenderメソッドの最後に戻ることです。

render: function(){
    this.collection.each(this.renderItem);
    return this;
 },

home: function(){
    this.content.html(this.itemsView.render().el);
},
于 2012-11-29T11:50:14.157 に答える