2

我需要将一个值传递给listView.template，以便了解有关collection.length.
我认为一种选择是重新定义 serializeData 方法以便以这种方式传递参数。 

var ListView = Marionette.CompositeView.extend({

    initialize: function () {
        this.collection.on('reset', this.serializeData, this);
        this.collection.on('remove', this.serializeData, this);
        this.collection.on('add', this.serializeData, this);
    },

    serializeData: function () {
        console.log(this.collection.length);
        return {
            has_tasks: this.collection.length > 0
        };
    },

    // other codes
});

当我开始时app尚未collection获取，所以：

1.a) collection.legth = 0
2.b) 模板has_tasks = false按预期获得。

2.a) 在 fetch 之后collection.length is > 0，
2.b)serializeData被调用，所以它把has_tasks = true,
2.c) 模板似乎没有被渲染，因为它维护has_tasks = false

任何想法，因为2.c？

4

2 回答 2

3

最新的 Marionette 通过在视图上调用一个可选项templateHelpers来为视图提供额外的上下文来解决这个问题。此外，您的事件绑定对 Marionette 不友好，因为在卸载视图时它不会正确自动取消绑定。因此，在您看来，您需要做的就是：

var ListView = Marionette.CompositeView.extend({

    initialize: function () {
        this.bindTo(this.collection, "add", this.render, this);
        this.bindTo(this.collection, "remove", this.render, this);
        this.bindTo(this.collection, "reset", this.render, this);
    },

    templateHelpers: function () {
        console.log(this.collection.length);
        return {
            has_tasks: this.collection.length > 0
        };
    },

    // other codes
});

但是请注意，您可能不想在每次添加或删除项目时重新渲染整个视图和所有子元素。更好的方法是只更新显示的计数。例如：

var ListView = Marionette.CompositeView.extend({

    initialize: function () {
        this.bindTo(this.collection, "add", this.updateCount, this);
        this.bindTo(this.collection, "remove", this.updateCount, this);
        this.bindTo(this.collection, "reset", this.updateCount, this);
    },

    updateCount: function() {
        this.$('.count_span').html(this.collection.length);
    },

    // other codes
});
于 2012-07-04T19:27:57.597 回答
2

我会简单地使用类似的东西：

var ListView = Marionette.CompositeView.extend({
  initialize: function () {
    this.bindTo(this.collection, 'reset', this.render)
  },
  serializeData: function () {
    return { has_tasks: this.collection.length > 0 }
  }
});

再次调用 serializeData 不会影响您的视图。您需要再次渲染它以显示新值（因为render将通过再次调用来获取数据serializeData）。

无论如何，hasTask既然您可以访问集合（以及它的长度），那么发送到模板有什么意义？

于 2012-07-04T11:57:42.477 回答