主幹 - 展開視圖和殭屍

Question

我在列表視圖中渲染骨幹模型的集合，其中每個模型都有自己的listItemView，如。

var els = [];  
    _.each(this.collection.models, function(model){      
     var view = new TB_BB.RequestItemView({model : model}); 
     els.push(view.render().el); 
    }); 
    $('#request-list').append(els); 

每個ItemsView都可以在點擊事件（對服務器進行調用時）上展開，例如。

showDetails : function() {  

    var m = new TB_BB.RequestDetails({id : this.model.get('id')}); 
    var outerthis = this; 
    m.fetch({success : function() { 
     var det = new TB_BB.RequestDetailsView({model : m, el : outerthis.el, current : outerthis, template : '#request-expanded-template'});   
     det.render();  

    }});     
} 

所以邏輯就是這個展開視圖在當前項目的el中打開。您可能已經注意到，我正在傳遞對當前視圖的引用（outerthis），這是爲了避免在關閉展開視圖時讓這個視圖出現殭屍。

因此，在展開視圖中，我們有一個'隱藏'方法，它應該隱藏展開的視圖並顯示原始元素，例如（其中current是對非展開視圖的引用）。

hideDetails : function() { 
    $(this.el).empty();  
    this.options.current.render(); 
} 

我很確定這不是最好的方法 - 但不知道最好的方法是什麼？在這種情況下，在調用hidedetails時（因爲它引用了原始視圖）沒有殭屍。然而，我猜測每次'showDetails'視圖被調用並且關閉了一個新的殭屍存在？任何人都可以啓發什麼是擴大列表視圖的更好方式？

Answer 1

我曾經有過類似的情況，我不得不渲染一個樹型結構，並打開列表項來顯示子列表並再次關閉。我實現瞭解決的方式是有這樣的事情作爲HTML結構：

<div class="list-item"> 
    <div class="handle closed" /> 
    <span><%= title %></span> 
    <div class="sub-list" /> 
</div> 

所以每個列表項是與子視圖的空元素呈現。然後在點擊處理程序中，我會檢查這個列表項是否已經爲子列表創建了一個視圖，如果是，只顯示子列表元素;如果沒有，創建子列表視圖，該視圖呈現ajax-loader.gif並調用collection.fetch來獲取數據。

所以我的建議是使用單獨的dom元素，懶惰地創建子​​視圖，只是在關閉某些東西時隱藏dom元素，並保留對視圖的引用。