模板中要引用的主干集合变体

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错误，所以我想知道这是可能的还是有替代的方法？我想避免将MyCollection.foo逻辑移到模板中，但这似乎是最简单的方法。

Answer 1

首先，变异者不是脊骨或木偶的一部分。看起来你在使用Backbone.Mutators插件。它应该与模型而不是集合一起使用。

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

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

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

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

我怀疑它们是否与集合一起工作，因为我在文档中没有看到任何与集合有关的示例。

请阅读您正在使用的插件和框架的文档，并尝试理解您正在做的事情。

Answer 2

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

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

在这里，Mutators甚至不是必需的，foo只是MyCollection中的一个函数。

Answer 3

您需要有视图来处理模板和呈现。木偶有一个CollectionView api，这可能是您要寻找的，https://marionettejs.com/docs/master/marionette.collectionview.html#rendering-collectionviews引用了文档中的内容：

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