我正在使用骨干我正在尝试创建一个标签视图,该视图使用内部面板在这种情况下呈现表视图的相同实例。我的问题是,当第二个实例渲染删除第一个实例时,即使我一直在调试代码,我可以看到每个视图有两个不同的对象。
以下是创建对象的代码:
var tabs = new Dashboard.Tab({
id: 'reward-tab',
panels: [{
id: 'active-panel',
active: true,
label: 'Actives',
content: new Dashboard.Table({
id: 'active-table',
model: new Dashboard.TableModel(null,{
active: true
})
})
},{
id: 'dismiss-panel',
active: false,
label: 'Not active',
content: new Dashboard.Table({
id: 'dismiss-table',
model: new Dashboard.TableModel(null,{
active: false
})
})
}]
});
标签视图代码
Dashboard.Tab = Backbone.View.extend({
template : Handlebars.templates['tabs.hbs'],
panels: [],
events: {
'click .nav-tabs li a' : 'onTabClick'
},
initialize: function() {
this.id = this.options.id;
this.panels = this.options.panels;
},
onTabClick: function(e) {
e.preventDefault();
...
},
render:function(){
//Renders places holders
this.$el.html(this.template({
id: this.id,
tabs : this.panels
}));
$.each(this.panels, function(index, panel){
if(panel && panel.content) {
panel.content.on('ready', function(){
$('#' + panel.id).append(panel.content.el);
});
}
});
}
});
表格代码:
Dashboard.Table = Backbone.View.extend({
tableId: 'my-table',
initialize: function() {
var me = this;
this.tableId = this.options.id;
this.model.fetch({reset: true}).done(function () {
me.render();
});
....
},
render: function() {
....
this.trigger("ready");
}
});
就像我说的那样,我的问题似乎是由于某种原因,第二个视图它删除了第一个实例的html而只渲染了第二个实例。
任何帮助都将受到赞赏。
由于
答案 0 :(得分:1)
我有一个AHA时刻,我认为问题可能是我没有为每个视图定义不同的el。
当你没有Backbone在一个泛型div元素中创建视图时,所以在这种情况下我所做的就是为每个元素添加一个新元素,这就是诀窍。
修复:
var tabs = new Dashboard.Tab({
id: 'reward-tab',
panels: [{
id: 'active-panel',
active: true,
label: 'Actives',
content: new Dashboard.Table({
id: 'active-table',
el: $('<div class="active-table"></div>'),
model: new Dashboard.TableModel(null,{
active: true
})
})
},{
id: 'dismiss-panel',
active: false,
label: 'Not active',
content: new Dashboard.Table({
id: 'dismiss-table',
el: $('<div class="not-active-table"></div>'),
model: new Dashboard.TableModel(null,{
active: false
})
})
}]
});