要在模板中引用的主干集合更改器

Question

有没有一种使用Backbone.js / Marionette来使用类似于在Model中但在Collection ？ 例如：

在MyCollection.js ：

export default Backbone.Collection.extend({
    model: MyModel,
    ...
    mutators: {
        foo: function() {
            if (this.models.length)
                return this.models[0].get('foo');
            return "default value";
        }
    }
})

然后在MyModel.js ：

export default Backbone.Model.extend({
    mutators: {
        foo: function() {
            return "bar";
        }
    }
})

并在template.ejs ：

<div>
    <h1><%= myCollection.foo %></h1>
    <% for (var myModel of myCollection) { %>
        <span><%= myModel.foo %></span>
    <% } %>
</div>

我似乎正在遇到TypeError: Cannot read property 'foo' of undefined错误的TypeError: Cannot read property 'foo' of undefined ，所以我想知道这是否可行或是否存在替代方法？ 我想避免将MyCollection.foo逻辑移到模板中，但这似乎是最简单的方法。

Answer 1

首先，变异者不是骨干或牵线木偶的一部分。 看来您正在使用Backbone.Mutators插件。 它应该用于模型而不是集合。

您的代码有很多问题。 首先以下代码无效

foo: {
        if (this.models.length)
            return this.models[0].get('foo');
        return "default value";
    }

其次，您尝试从collection和model的构造函数访问属性。 您应该使用数据创建它们的实例，并从集合实例的models属性访问模型实例。

<div>
  <h1><%= myCollection.foo %></h1>
  <% for (var myModel of myCollection.models) { %>
      <span><%= myModel.get("foo") %></span>
  <% } %>
</div>

我怀疑它们是否适用于集合，因为我在文档中看不到任何有关集合的示例。

请阅读您正在使用的插件和框架的文档，并尝试了解您在做什么...

Answer 2

似乎Backbone.Mutators插件不支持Collection 。 似乎最简单的选择是将一个Object添加到Marionette.View的serializeData方法中，即：

serializeData: function() {
    return { models: this.collection.models, foo: this.collection.foo().toJSON() };
}

在这里，甚至都不需要Mutators ， foo只是MyCollection一个函数。

Answer 3

您需要具有处理模板和渲染的视图。 Marionette有一个CollectionView API，可能是您正在寻找的https://marionettejs.com/docs/master/marionette.collectionview.html#rendering-collectionviews文档引用：

CollectionView将循环遍历指定集合中的所有模型，使用指定的childView渲染每个模型，然后将子视图的el的结果追加到集合视图的el。 默认情况下，CollectionView将在DOM中维护排序后的集合的顺序。 可以通过在初始化时指定{sort：false}来禁用此行为。