1

我想在不丢失任何绑定事件的情况下呈现一个视图及其子视图。现在我正在渲染一次主视图，然后将其子视图附加到一个元素。当父视图再次渲染时，它会清除el绑定的子视图。

这是我现在拥有的：

render: function() {     
    var html = this.template({model:this.model.toJSON(), otherModel:window.otherModel.toJSON()});

    this.$el.html(html);
    this.openList();
}

OpenList: function(){
    if(typeof(this.ListView)=="undefined"){
        this.ListView = new App.ListView({el:this.$("#ListView-tab"),collection:this.model.list});
    }
    this.ListView.collection.fetch();
}

我已经阅读了一些解决此问题的方法：

a) 填充渲染

此选项将放入初始渲染，initialize然后在render函数中使用 jquery 添加信息

  initialize: function() {
      var html = this.template({model:this.model.toJSON(), otherModel:window.otherModel.toJSON()});

}

 render: function() {     
    this.$('.title').text(this.model.get('title'));
    this.$('.date').text(this.model.get('date'));

}

b) 分离和委派事件

detach()每次渲染父视图时，子视图、el重新附加视图和视图delegateEvents()

render: function() {
    if(typeof(this.ListView)!="undefined"){
        this.ListView.$el.detach
    }     
    var html = this.template({model:this.model.toJSON(), otherModel:window.otherModel.toJSON()});

    this.$el.html(html);
    this.openList();
}

OpenList: function(){
    if(typeof(this.ListView)=="undefined"){
        this.ListView = new App.ListView({collection:this.model.list});
    }
    if(this.ListView.$el.parent().length)this.$("#ListView-tab").append(this.ListView.el); //if not already appended
    this.ListView.collection.fetch();
    this.ListView.delegateEvents();
}

c）最后的选择是保留我的大部分代码，只需将以下代码放在render父视图中

if(typeof(this.ListView)!="undefined"){
    this.ListView=undefined;
}

这将使子视图无效并在每次主视图呈现时重新创建它。

我发布的方法有问题吗？我倾向于选项 c)，因为它是确保一切都将被重新创建并使其事件正常工作的最简单方法。

4

0 回答 0