通过 CollectionView (Marionette / Backbone) 传递布局（和操作区域）答案

【问题标题】：Passing Layouts (and manipulating regions) through CollectionView (Marionette / Backbone)通过 CollectionView (Marionette / Backbone) 传递布局（和操作区域）
【发布时间】：2013-04-12 19:14:08
【问题描述】：

我正在尝试将布局传递给 CollectionView，然后操作其中的区域。

现在，我正在成功地将布局发送到 CollectionView（在它自己的区域中），如下所示：

main_layout.main_region.show(new CollectionView({
   itemView: ALayout,
   collection : someCollection
}));

然后我可以看到布局正在呈现。但是，我想不出一种方法来修改（甚至触摸）“ALayout”中的区域。有没有办法做到这一点？最后，我试图获得一组“窗格”，每个窗格内部都有相同区域的布局，并以某种方式绘制这些区域。

此外，我最初只是将 ItemView 传递给 CollectionView，但我可以想办法将区域添加到该 ItemView 中。如果可能，我想在传递给它的文件中控制这些区域（无论是布局还是 ItemView）。

有人有这方面的经验吗？

编辑： 好的，所以我找到了使用 Marionette 附带的 Backbone.BabySitter 的提示——从这个文档中讨论了 CollectionView 的孩子here。所以现在我的代码看起来像这样。

var collectionViewToUse = new CollectionView({
    itemView: ALayout,
    collection : someCollection
});

main_layout.main_region.show(collectionViewToUse);

collectionViewToUse.children.each(function(view) {
  console.log(view);
  //This fails.
  view.regionManagers.someRegion.show('HHHHHH');
  //So does this, if I run it instead
  view.someRegion.show('Anything');
});

主干视图实例正在被记录，所以我想我在这里做点什么。谁能告诉我如何从这一步操作区域？

【问题讨论】：

标签： javascript backbone.js marionette backbone-views

【解决方案1】：

好的，我想我有这个问题的答案。希望这对将来的其他人有所帮助！

答案是使用 BabySitter。您基本上实例化一个 CollectionView，然后使用 BabySitter 循环遍历它并对每个视图执行一些操作。所以如果你给它一个布局：

var collectionViewToUse = new CollectionView({
    itemView: ALayout,
    collection : someCollection
});

main_layout.main_region.show(collectionViewToUse);

collectionViewToUse.children.each(function(view) {
   view.someRegion.show(new SomeView({model : view.model });
});

所以基本上，您可以将 Collection 视图传递给 Layout 而不是 ItemView，然后循环遍历“视图”并将新视图传递到区域中。

如果有任何改进或对其他人有任何帮助，请发表评论！

【讨论】：

这个错误告诉我我必须指定一个布局不是的 ItemView。
奇怪。我的项目正在生产中。您可以发布带有错误/的要点吗？您使用的是哪个版本的 Marionette/Backbone？如果您有兴趣，请发布您的一些代码，我也会将其与我的代码进行比较！
是的，这是我的代码的问题。我在复合视图和 onCompositeCollectionRendered 中执行此操作。当我调用 chidren.each view.someRegion 时未定义。
可能正在使用不同版本的骨干/木偶？
一开始我也是这么想的，但我认为@dstarh 证实是他的代码中的其他东西导致了这个问题。这是正确的吗？

【解决方案2】：

我通过将逻辑封装在集合本身内部而不是从外部对其进行修改，发现了对这种模式的轻微修改。

var collectionViewToUse = new CollectionView({
    itemView: ALayout,
    collection : someCollection,

    onBeforeItemAdded: function(view) {
        view.on('show', function() {

            view.someRegion.show(
                new SomeView({
                    model : view.model // view.model is model of Layout
                })
            );

        });
    }
});

main_layout.main_region.show(collectionViewToUse);

所有发布的答案都受到model 附加到Layout 的影响，而模型只是在那里传递给子视图之一。

【讨论】：