我在集合中有两个不同的模型,如何在视图中访问它们?问题分为两部分,如果您对问题不清楚,请告诉我。
第1部分
模型1
Movie = Backbone.Model.extend({
initialize:function(){
console.log("The model 'Movie' initialized");
}
});
模型2
Songs = Backbone.Model.extend({
initialize:function(){
console.log("The model 'Songs' initialized");
}
});
为这些模型创建的实例将作为数组添加到集合中,如下所示
var movie = new Movie({type:"movie",name:"Lord of the Rings",year:"2006"});
var songs = new Songs({type:"songs",name:"Rahna Thu", artist:"A R Rahman", album:"Delhi-6"});
var entertainment = new Backbone.Collection([movie,songs]);
现在,我如何在视图中访问这些模型?要加载这些模型并绑定到模板?我不知道我是否正确,但我做了类似的事情
MainView = Backbone.View.extend({
collection:entertainment,
initialize:function(){
$.each(this.collection.toJSON(),function(i,item){
if(item.type=="songs"){
alert("Song: "+item.name+" Artist: "+item.artist+" Album: "+item.album);
}
});
}
});
var mainview = new MainView({el:$('body')});
虽然我正确地收到警报,但我需要知道这是否是正确的方法。
第二部分
现在是我问题的第二部分。如果这些模型只有'urlRoot'怎么办?如何预取模型并填写集合?
即。在我的第二个场景中,我的模型如下
Movie = Backbone.Model.extend({
urlRoot:"https://localhost:8080/entertainment/movies"
});
和
Songs = Backbone.Model.extend({
urlRoot:"https://localhost:8080/entertainment/songs"
});
现在,如何将这些模型添加到集合中并在视图中访问它们?
实际的解决方案,我期待在加载仪表板页面时加载多个数据,如网格,图表和其他服务器端数据。由于所有这些都需要填充页面加载,我想到了这样的解决方案。我在这做对了吗?或者有更好的方法吗?
很抱歉这个问题很长,但我非常感谢这里的专家建议。
答案 0 :(得分:0)
Backbone实际上被设计为具有与您不同的模型和集合。结构面向数据的对象中的模型应该类似,因为集合应该是类似模型的聚合器。
您的应用应该类似于:
var Movie = Backbone.Model.extend({
initialize: function() { console.log('movie initialized') });
});
var Song = Backbone.Model.extend({
initialize: function() { console.log('song initialized') });
});
var Movies = Backbone.Collection.extend({
model : Movie,
url : 'https://localhost:8080/entertainment/movies'
initialize: function() { console.log('movies collection initialized') });
});
var Songs = Backbone.Collection.extend({
model : Song,
url : 'https://localhost:8080/entertainment/songs'
initialize: function() { console.log('songs collection initialized') });
});
MainView = Backbone.View.extend({
initialize:function(){
this.entertainment = {
songs : new Songs(),
movies : new Movies()
};
this.entertainment.songs.each( function(model) { // Underscore method
alert("Song: "+model.get('name')+" Artist ...");
});
}
});
您不应该在一个集合中放置不同类型的模型,因为您将中断(或者您将创建不正确的)数据库API。