1

* 更新 - ビューの 1 つにサンプル コードを追加 *

これは何度も議論されており、私はこのトピックについて多くの提案を行ってきましたが、まだ運がありません.

私のアプリケーションはタブベースです。つまり、ユーザーはグローバル検索ボックスでエンティティを検索し、エンティティを選択すると、ビュー/モデルが生成され、ビューが新しいタブでレンダリングされます。ユーザーは上記のプロセスを繰り返すことで複数のタブを開くことができます。

私が直面している問題は、新しいタブが開かれるたびに、ブラウザーのメモリ消費量が約 6 MB 増加することです (各タブで取得および表示されるデータは最大 60 kb です)。

それだけでなく、タブを閉じると、そのタブの下の各ビューに対してカスタムの閉じる関数 (以下にコピー) が呼び出されているのがわかりますが、どういうわけかブラウザーのメモリは減りません。これは、ガベージ コレクションが機能していないか、ビュー/モデルが適切にクリーンアップされていないことを意味します。

どんな助けでも大歓迎です。

define([
    "hbs!modules/applications/templates/applications",
    "vent"
],
function (tpl, vent) {

    var View = Backbone.Marionette.ItemView.extend({

        className: 'modApplications',

        template: {
            type: 'handlebars',
            template: tpl
        },

        refresh: function(){
            self.$('.body-of-table').css('visibility', 'hidden');
            self.$('.application-panel .spinnerDiv').addClass('loading');
            this.model.fetch().always(function(){
                self.$('.application-panel .spinnerDiv').removeClass('loading');
            });
        },

        initialize: function(){
            this.model.on('change', this.render, this);
            vent.bindTo(vent, 'updateApplications', this.refresh, this);
        },

        onShow: function(){
            var self = this;
            this.$el.on('click', '.action-refresh', function(e) {
                self.refresh();
                e.preventDefault();
            });
        },

        close: function() {
            _.each(this.bindings, function (binding) {
                binding.model.unbind(binding.ev, binding.callback);
            });
            this.bindings = [];
            this.unbind();
            this.off();
            this.model.off('change');
            this.model.unbind('change', this.render, this);
            this.remove();
            delete this.$el;
            delete this.el;
            if(console) console.log("kill : view.applications");
        }

    });

    return View;

});
4

1 に答える 1

1

問題と修正が見つかりました。

問題は、すべての新しいタブに 1 つのグローバル Marionette.EventAggregator を使用していたことです。これは、タブ内のさまざまなセクション間の通信手段として使用されていました。これで、タブが閉じられても、他のタブがまだそれを使用しているため、main.js ファイルは引き続きグローバル ベントへの参照を保持します。これは、閉じたタブへの参照がまだ保持されていたため、ビュー/モデルが gc されなかった場所です。

これを修正するために、各タブに個別のベントを作成し、そのベント オブジェクトを使用してそのタブ内のイベントをトリガーしました。タブを閉じるアクションで、すべてのイベントのバインドを解除し、閉じられるタブのベントに null 参照を割り当てます。

これが将来誰かに役立つことを願っています。

于 2013-05-16T15:43:48.523 に答える