我想在复合视图中显示电影列表,但迭代并显示模板。
$(function(){
var app = new Backbone.Marionette.Application();
app.addRegions({
appRegion: '#AppBase'
});
app.module('Bollywood',function(module,App,Backbone,Marionette,$,_){
movie = Backbone.Model.extend({});
movieList = Backbone.Collection.extend({
model: movie
});
_movieList = new movieList([
{name:'1'},{name:'2'},{name:'3'},{name:'4'},{name:'5'}
]);
actor = Backbone.Model.extend({});
actorList = Backbone.Collection.extend({
model: actor
});
module.MainPage = Marionette.LayoutView.extend({
template: '#mainPage',
className: 'main',
regions:{
'contentRegion':'#ContentRegion'
},
ui:{
'navMovies':'#nav-movies',
'navActors':'#nav-actors',
},
events:{
'click #nav-movies' : 'onNavMoviesClicked',
'click #nav-actors' : 'onNavActorsClicked'
},
initialize:function(){
this.initRoute();
},
onRender:function(){
if(!Backbone.history.started) Backbone.history.start();
},
initRoute:function(){
var $this = this;
var routeHandler = {
'':'onNavMoviesNav',
'movie':'onNavMoviesNav',
'actor':'onNavActorsNav',
};
var routeController = {
onNavMoviesNav:function(){
$this.onNavMoviesClicked();
},
onNavActorsNav:function(){
$this.onNavActorsClicked();
}
};
var router = Marionette.AppRouter.extend({});
var r = new router({
appRoutes: routeHandler,
controller: routeController
});
},
onNavMoviesClicked:function(){
var a = new module.MoviePage({
collection: _movieList
});
this.contentRegion.show(a);
this.$el.find('.navButton.active').removeClass('active');
this.ui.navMovies.addClass('active');
},
onNavActorsClicked:function(){
var a = new module.ActorPage();
this.contentRegion.show(a);
this.$el.find('.navButton.active').removeClass('active');
this.ui.navActors.addClass('active');
},
});
MovieView = Marionette.ItemView.extend({
template: '#MovieName',
tagName: 'li',
});
module.MoviePage = Marionette.CompositeView.extend({
template: '#MoviesPage',
itemView: MovieView,
appendHtml: function(collectionView,itemView){
collectionView.$('#movieList').append(itemView.el);
}
});
module.ActorPage = Marionette.LayoutView.extend({
template: '#ActorsPage',
});
module.addInitializer(function(){
var main = new module.MainPage();
app.appRegion.show(main);
});
});
app.start();
});