Question

我有一个名为IndexView（）的牵线木偶复合视图。它与名为index.html的把手模板相关联。

在我继续之前，我会注意到我理解我可以简单地渲染与合成视图相关联的项目视图，以输出集合中的每个模型。我会这样做，但我想问我的理解。

我从网址＆＃34; / api / users＆＃34;

中获取了一个集合

并获得这样的列表

[{"name": "John Doe", "age": 30 }, {"name":"Jane Doe", "age": 31}]

在我的用户控制器中我有代码

var usersCollection = new UsersCollection();
App.contentRegion.show(new IndexView({collection: usersCollection}));
usersCollection.fetch();

如何在模板中迭代集合？

e.g。

{{#each ????}}
    <li> {{name}} {{age}} </li>
{{/each}}

问号出在哪里？从ItemView的牵线木偶文档中，它将是项目。 CollectionView或CompositeView会是什么？

Answer 1

您不会在模板中迭代集合。 CompositeView在内部循环遍历集合，并为集合中的每个模型呈现ItemView。每个ItemView都从该集合中接收一个模型作为其数据。然后渲染每个单独的ItemView，并将模型属性传递给模板。因此，对于ItemView的模板，您不需要遍历每个项目，因为上下文仅表示单个项目（模型）。因此，您的模板将只是：

<li> {{name}} {{age}} </li>
<li> {{someOtherAttribute}} </li>
<li> {{andYetAnotherAttribute}} </li>

修改如果要在模板中迭代集合，则不要使用CollectionView。将集合传递给ItemView，如下所示：

view = new ItemView({collection: myCollection});

ItemView会将集合作为模型数组传递给模板上下文的items属性中的模板。所以你的模板将是：

{{#each items}} <li> {{name}} {{age}} </li> {{/each}}

由于ItemView现在正在处理所有模型，因此您的事件将不再是单个模型，而是整个集合。

Answer 2

Marionette.CompositeView使用buildItemView()内置方法将集合的模型添加到其项目视图中。

它还有一个名为serilizeData的函数，其本机实现如下：

// Serialize the collection for the view.
// You can override the `serializeData` method in your own view
// definition, to provide custom serialization for your view's data.

Marionette.CompositeView = Marionette.CollectionView.extend({
    // composite view implementation
    serializeData: function() {
        var data = {};
        if (this.model) {
            data = this.model.toJSON();
        }
        // your case
        // data.myCollection = this.collection.toJSON();
        // then use myCollection in your template in place of ????
        return data;
    }
    // composite view implementation
});

您可以覆盖它以将任何对象或对象集合传递给compositeView模板。

据我所知，在这种情况下，没有其他构建方法直接从模板访问集合。

木偶复合视图渲染集合

2 个答案: