在Backbone.js框架中向对方添加视图

我有一个集合，集合中的每个项目本身可以是一个集合。我可以渲染集合中的每个项目，并且确实可以渲染任何本身为集合的项目。我遇到的问题是如何在HTML反映数据结构的层次性时呈现此结构。目前，层次结构已经变平，我最终得到了一个长长的列表<div>元素。在Backbone.js框架中向对方添加视图

我有在这使得单个项目集合每个项目查看，并检查是否任何嵌套项目存在需要渲染：

ItemView = Backbone.View.extend({ 
    el: $("div#ItemView"), 

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

    render: function() { 
     // Render a single item from the Collection 
     $(this.el).append('<div id=' + this.model.id + '></div>'); 
     // Create a View to render the nested Collection 
     var collectionView = new CollectionView({ collection: this.model.nestedCollection }); 
     collectionView.render(); 
     return this; 
    } 
});

现在，这也许是在我的问题是，但CollectionView将为每个需要渲染的物品创建一个ItemView。这是处理层次结构的递归性质的方式，但是由于ItemView始终具有相同的$（“div＃ItemView”）元素，所以它会将所有内容都附加到其中，因此会导致展平。

CollectionsView = Backbone.View.extend({ 
    initialize:function() { 
     _.bindAll(this, 'render'); 
    }, 

    render: function() { 
     var self = this; 

     // Iterate over collection, rendering each item 
     _(this.collection.models).each(function(item) { 
      var itemView = new ItemView({model: item}); 
      itemView.render(); 
     }, this); 

     return this; 
    } 
});

我希望能够追加项目到这是不是一个$("div#ItemView")“父”元素。 HTML结构，我想最终了会是这样的：

<div> 
    <div>...</div> 
    <div> 
     <div>...</div> 
     ... 
    </div> 
    ... 
</div>

有我自己画到这里的角落？

来源

2012-03-30 Jack

在我的Backbone.Marionette框架中，我有一个称为“CompositeView”的视图类型，它以这种方式工作。

CompositeView的基本思想是它可以在同一视图中渲染模型和集合。

它可以使用模板呈现单个模型。它还可以从该模型和该集合中的每个模型中采集一个集合，呈现一个视图。默认情况下，它使用您定义的相同组合视图类型来渲染集合中的每个模型。你所要做的就是通过initialize方法告诉视图实例集合的位置，并且你会得到一个递归层次结构。

我有一个的jsfiddle工作演示，在这里：http://jsfiddle.net/derickbailey/AdWjU/

，你可以得到的提线木偶的源代码和文档，在这里：https://github.com/derickbailey/backbone.marionette

我知道我不能直接回答你的问题，但是这比你想象的要多得多。不过，希望演示和插件对你有所帮助。

来源

2012-03-30 18:39:51

我找到了一个解决方案...它不觉得'框架'，但它很简单，似乎工作。

我有两个查看：

ItemView控件
的CollectionView

的一般流程如下：

ItemView.render（）由<div>元件附加到呈现本身页面中已知的HTML元素。接下来的工作是为它包含的集合创建一个CollectionView。 CollectionView然后为集合中的每个项目创建一个ItemView。

的解决方案是：

ItemView控件已经将自身添加并在此过程中创造了一个新的<div>刚过，我在的CollectionView的el属性设置为新追加的<div>。 CollectionView然后使用它的更新el属性来设置它正在为集合中的每个Item创建的ItemView的el属性。然后，当每个ItemView呈现自己时，它正在对其“父”<div>这样做。

来源

2012-03-30 19:46:03 Jack

在Backbone.js框架中向对方添加视图

回答

相关问题