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

Backbone.Mutators插件不支持Collection。似乎最简单的替代方法是在Object的{{1}}方法中添加serializeData，即：

Marionette.View

此处serializeData: function() { return { models: this.collection.models, foo: this.collection.foo().toJSON() }; }甚至不需要，Mutators只是foo中的一项功能。

Answer 3

您需要拥有处理模板和渲染的视图。 Marionette有一个CollectionView api，大概是你要找的， https://marionettejs.com/docs/master/marionette.collectionview.html#rendering-collectionviews 从文档引用：

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

Backbone Collection mutator在模板中引用

3 个答案: