Marionette.CompositeView 中的 templateHelpers

Question

我不知道为什么这段代码不起作用。
正在阅读 文档,
这 templateHelpers 应该被称为。

我的目标是通过 this.collection.length 到模板。

有什么提示吗？谢谢。

我正在使用 Backbone.Marionette v0.9.5

---

return Marionette.CompositeView.extend({
    className: 'user-board',

    template: usersTemplate,

    itemView: userItemView,

    initialize: function () {
        this.collection = new UseList();
        this.collection.fetch();
    },

    appendHtml: function (collectionView, itemView) {
        collectionView.$el.find('ul.users-list').append(itemView.el);
    },

    templateHelpers: function () {
        console.log(this.collection.length);
    },

    serializeData: function () {
        return {
            weekly: this.options.weekly,
            users_length: this.collection.length // here the length is zero
                                           // after the fetch the length is > 0
                                           // but in template remains 0
        };
    }
});

---

要解决我的问题，我必须执行以下操作...

    initialize: function () {
        _.bindAll(this, 'render');
        this.collection = new NewCollection();
        this.collection.fetch({
            success: this.render
        });
    }

有没有更好的方法让它发挥作用？

Answer 1

正在阅读 木偶文档 serializeData 方法，这是使用的一种方法 mixinTemplateHelpers, 仅被调用 Item View.render 方法 这里 并且在您当前的代码中您根本不渲染

更新：这样，每次集合收到新数据时，它都会将您的视图更新为新长度

initialize: function () {
    _.bindAll(this, 'render');
    this.collection = new NewCollection();
    this.collection.fetch();
    this.collection.bind('reset', this.render);
}

Answer 2

这段代码只声明了一个视图。您可以分享实例化视图并显示它的代码吗？ templateHelpers 将被调用并将数据传递给模板 当模板渲染时. 。也就是说，您要么需要在隐式调用的区域中显示视图 render 视图上的方法，或显式调用 render 方法。

要想有用， templateHelpers 应该返回一个对象。例如：

templateHelpers: function() {
    return {colLength: this.collection.length};
}

要记住一件重要的事情： fetch 触发异步完成的 AJAX 请求。如果你想等待 fetch 要在渲染视图之前成功，那么您需要使用 木偶.异步.

---

根据更新问题进行更新

为了避免打电话 render 从视图的 initialize 并且只在以下情况下才这样做 render 被外部调用，将代码更改为：

return Marionette.CompositeView.extend({
    className: 'user-board',

    template: usersTemplate,

    itemView: userItemView,

    initialize: function () {
        this.collection = new UseList();
        var that = this;
        this.defer = $.Deferred();
        this.collection.fetch({
            success: that.defer.resolve,
            error: that.defer.resolve
        });
    },

    appendHtml: function (collectionView, itemView) {
        collectionView.$el.find('ul.users-list').append(itemView.el);
    },

    templateHelpers: function () {
        console.log(this.collection.length);
        // For greater flexibility and maintainability, don't override `serializeData`.
        return {
            weekly: this.options.weekly,
            users_length: this.collection.length
        };
    },

    render: function() {
        var that = this,
            args = arguments;
        $.when(this.defer).done(function() {
            Marionette.CompositeView.prototype.apply(that, args);
        });
    }
}); 

我正在解决 this.render 成功和错误时都会显示，否则如果出现错误，视图将永远不会呈现（除非那是您想要的）。

请注意，如果您使用 Marionette.Async 那么您将返回 this.defer 在视图的 beforeRender Marionette.Async 会负责延迟渲染。

另请注意，一旦 this.defer 解决后，未来的渲染将在调用时运行，因为没有什么可等待的，直到 this.defer 已以编程方式重置。

Answer 3

至少在 Marionette v1.0.3 中，我喜欢在调用 Region.show() 期间自动处理渲染的模式，因此我从具有集合的控制器对象中调用该模式，然后在实例化时将其传递给视图显示视图。我什至不必将此逻辑放入获取成功回调中或显式绑定到“重置”事件，因为 Marionette 复合/集合视图已经知道在获取成功时（重新）呈现自身（调试器将显示）你）。

Answer 4

使用详细的设置后，您还可以使用比到目前为止描述的更有用的模板助手。

例如，

如果您只是将 <%= functionName %> 放入模板中，并尝试让数字以可视方式显示在前端页面上（因为您想要 .length 我明白了），marionette 就会为您完成这项工作。

像这样：

--Template File--
<div id="followerCount"> <%= showCount %> </div>


--Helper Function in View--
templateHelpers: {
    showCount: function(){
                   return this.collection.length;
    } 
}

希望这是有意义的，或者至少可以帮助其他人寻找一种更简单的方法将数据库返回的 json 集成到他们的模板中。