2

我不知道为什么这段代码不起作用。
阅读文档，应该调用
。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
        });
    }

有没有更好的方法让它工作？

4

4 回答 4

3

阅读Marionette Documentation serializeData方法，即 using mixinTemplateHelpers，仅在此处Item View.render的方法上调用，而在您当前的代码中，您根本不渲染

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

initialize: function () {
    _.bindAll(this, 'render');
    this.collection = new NewCollection();
    this.collection.fetch();
    this.collection.bind('reset', this.render);
}
于 2012-07-27T18:34:01.790 回答
1

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

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

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

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

根据更新问题更新

为避免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以编程方式重置。

于 2012-07-27T21:09:13.007 回答
0

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

于 2013-06-19T19:58:05.937 回答
0

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

例如，

如果您只是将 <%= functionName %> 放入模板中，在该模板中您试图让数字显示在前端页面上（因为您想要 .length 我看到了），木偶将简单地为您完成工作。

所以像这样：

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


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

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

于 2014-06-25T21:06:39.387 回答