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元素，保留对视图的引用。

骨干 - 扩展视图和僵尸

1 个答案: