Question

我想渲染一个视图及其子视图，而不会丢失任何绑定事件。现在我将渲染主视图一次，然后将其子视图附加到元素。当父视图再次呈现时，它会清除子视图绑定的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），因为它是确保一切都将被重新创建并使其事件正常工作的最简单方法。

在backbonejs中重用视图

0 个答案: