backbone.js 序列化复合视图中的数据

t3irkdon 于 2022-11-10 发布在其他

关注(0)|答案(2)|浏览(143)

我需要向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）在取出collection.length is > 0之后，
2.b）serializeData被调用，因此它将has_tasks = true
2.c）模板似乎没有被渲染，因为它维护has_tasks = false
你知道是因为什么吗

backbone.js

来源：https://stackoverflow.com/questions/11328574/serializedata-in-compositeview

2条答案

按热度按时间

g2ieeal71#

最新的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
});

赞(0）回复(0）举报 2022-11-10

wecizke32#

我会简单地使用类似以下的语句：

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发送到模板有什么意义呢？

赞(0）回复(0）举报 2022-11-10

我来回答

backbone.js 序列化复合视图中的数据

2条答案

相关问题

热门标签

最新问答