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メソッドの読み取りは、ここのメソッドで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};
}

覚えておくべき重要なことの 1 つfetchは、非同期で行われる AJAX 要求をトリガーすることです。ビューをレンダリングする前に が成功するのを待ちたい場合は、 Marionette.Asyncfetchを使用する必要があります。

更新の質問に基づいて更新する

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成功とエラーの両方で解決しています。それ以外の場合、エラーが発生した場合、ビューはレンダリングされません (それが必要な場合を除きます)。

this.deferMarionette.Async を使用すると、ビューに戻り、 beforeRenderMarionette.Async がレンダリングの遅延を処理することに注意してください。

また、 が解決されると、 がプログラムによってリセットされるthis.deferまで待つ必要がないため、呼び出されたときに将来のレンダリングが実行されることに注意してください。this.defer

于 2012-07-27T21:09:13.007 に答える