4

他のビューのレンダリングを担当するメインビューがあります…。これが完全なコードです（1）（2）（3）。

ビュー（View1、View2、View3）を初めてロードするときは、すべて問題ありません。
次に、this.optionsを変更してビューをリロードしようとすると、どうやら問題ないようです。
しかし、ゾンビビューがいくつかあることに気付きました…、つまり
、メモリ内の以前のビューのインスタンスを意味します。
私はこのコードの平和を使用してこれを発見します…</p> 

View1 = Backbone.View.extend({
    initialize: function ()
    {
        this.model.on('change', function () {
            console.log(this.cid);
        }, this); 
    }
});

cidビューを再ロードするたびに、異なるCIDを持つ新しいビューが生成され、メモリにとどまることがわかりました。例

** first load **:
console.log(this.cid); // cid:12

** Second load **
console.log(this.cid); // cid:12
console.log(this.cid); // cid:13

等々...

私のデザインの何が問題になっていますか？どうすれば修正できますか？

（1）エントリポイント

require([
    "js/mainApp"
    ], function(App){
        App.initialize(data.id);
});

（2）mainApp

define([
    "js/views/taskDetailView"
], function (TaskDetailView) {

    var initialize = function(task_id){

        var vent;

        vent = _.extend({}, Backbone.Events); // The Event Aggregator

        var taskDetailView = new TaskDetailView({
            task_id: task_id,
            vent: vent
        });

        $(".project-content").html(taskDetailView.$el);
    }

    return { 
        initialize: initialize
    };
});

（3）

define([
    "js/views/view1",
    "js/views/view2",
    "js/views/view3",
    "text!templates/Task/TaskDetailedView.html"
], function (View1, View2, View3, taskDetailedViewTemplate) {

    var TaskDetailView = Backbone.View.extend({

        el: $(".project-content"),

        initialize: function ()
        {
            this.render();
        },

        render: function ()
        {
            var options;
            // render from template and assign this.el to the root of the element
            // e.g .project-content
            this.setElement($(Mustache.render(taskDetailedViewTemplate)));
            this.view1 = new View1(_.extend( {el:this.$("#taskView")} , this.options));
            this.view2 = new View2(_.extend( {el:this.$("#feedView")} , this.options));
            this.view3 = new View3(_.extend( {el:this.$("#followerView")} , this.options));
        }
    });    

    return TaskDetailView;
});
4

1 に答える 1

2

実際にDOMからビューを削除するのを忘れていますか?

http://documentcloud.github.com/backbone/#View-remove

同じ要素に別のビューを割り当てるだけでは、以前のビューは削除されません (複数のビューが同じ要素を参照できます)。

編集：

ビューを再割り当てする前に、ビューが存在するかどうかを確認してみてください。

    render: function ()
    {
        var options;
        // render from template and assign this.el to the root of the element
        // e.g .project-content

     if (this.view1 != null) {
       this.view1.remove();
      }

     //the rest of your code

編集2：

mainApp が 2 回目にどのように呼び出されるかはわかりませんが、TaskDetailsView への参照を保持するようにしてみてください。

試す 1 つの方法は、新しい TaskDetailsView を割り当てる前に、既存のものをクリーンアップすることです。

 if (this._taskDetailsView != null) { 
     this._taskDetailsView.cleanUp().remove(); 
    }

 var taskDetailView = new TaskDetailView({
            task_id: task_id,
            vent: vent
  });
    this._taskDetailsView = taskDetailView;

より良い方法は、おそらくビューの必要な部分を更新することです

define([
    "js/views/taskDetailView"
], function (TaskDetailView) {

    var _taskDetailView;
    var initialize = function(task_id){

        var vent;

        vent = _.extend({}, Backbone.Events); // The Event Aggregator

        if (this._taskDetailsView == null) { 
        var taskDetailView = new TaskDetailView({
            task_id: task_id,
            vent: vent
        });
          this._taskDetailsView = taskDetailView;
        } else {
            this._taskDetailsView.refresh({task_id: task_id,
              vent: vent
           });

          }
        $(".project-content").html(taskDetailView.$el);
    }

    return { 
        initialize: initialize
    };
});
于 2012-05-18T15:08:31.613 に答える