Backbone.js - 視圖中的視圖和重新渲染

我有一個項目集合，我正在構建一個簡單的界面，列出左側的項目，然後顯示右側的當前選定項目的詳細信息。Backbone.js - 視圖中的視圖和重新渲染

我想呈現ItemListView中的每個項目的ItemView。我需要綁定到模型的更改事件，以便ItemView隨ItemDetailView一起更新。

在我下面的實現中，當更新ItemDetailView中顯示的模型時，在模型上設置一個新屬性會更新ItemDetailView，但不會在ItemView中顯示它。我知道我在做一些愚蠢的事情。我該如何重新實現這個，以便兩者都被重新渲染？

P.S.我試圖避免每次重新呈現列表視圖。我想單獨重新呈現列表中的每個ItemView。

var Item = Backbone.Model.extend({ 

}); 

var Items = Backbone.Collection.extend({ 

    model: Item 

}); 

var ItemView = Backbone.View.extend({ 

    template: window.JST['item/list'], 

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

    render: function() { 
    $(this.el).html(this.template(this.model.toJSON())); 
    return this; 
    } 

}); 

var ItemDetailView = Backbone.View.extend({ 

    el: $('.detail .grid'), 

    template: window.JST['item/detail'], 

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

    render: function() { 
    $(this.el).html('').fadeOut('fast', function() { 
     $(this.el).html(this.template(this.model.toJSON())).fadeIn(); 
    }.bind(this)); 
    return this; 
    } 

}); 

// for the Items collection 
var ItemsView = Backbone.View.extend({ 

    el: $('.items ol.grid'), 

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

    render: function() { 

    // need to put this as the first item in the list 
    $(this.el).html('<li class="listHeader"></li>'); 

    // iterate over the collection and render each ItemView separately 
    this.collection.each(function(l) { 
     var lv = new ListView({ model: l, collection: this.collection }); 
     var html = lv.template(lv.model.toJSON()); 
     $(this.el).append(html); 
    }.bind(this)); 
    } 

});

來源

2012-11-05 Kevin O' Hara

我覺得這個問題（也許不是唯一的？）是你沒有設置el財產上ItemView，所以它不知道如何來表現自己。我不確定解決這個問題的最好方法是什麼。也許使用<li id='<#= cid #>' ...，然後在ItemView的initialize函數中，使用this.el = "#" + this.model.cid;或類似設置el，將客戶端ID添加到模板中。

來源

2012-11-05 20:16:11 McGarnagle

是的，我認爲這是問題，但不知道如何使el是動態的。我會嘗試你的想法，看看它給我帶來了什麼。 –

Backbone.js - 視圖中的視圖和重新渲染

回答

相關問題