如何在牵线木偶的复合视图中渲染集合

时间:2015-12-07 10:22:01

标签: javascript backbone.js marionette

我想在复合视图中显示电影列表,但迭代并显示模板。

$(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();
});

0 个答案:

没有答案