Question

问题在于，每次通过集合的提取功能（ MovieCollection ）添加新对象时，都会添加某种事件触发器并初始化新的 MovieList 在收集所有项目后传递集合的对象。

这是我的app.js：

// Global App skeleton for backbone
var App = new Backbone.Marionette.Application();
_.extend(App, {
    Controller: {},
    View: {},
    Model: {},
    Page: {},
    Scrapers: {},
    Providers: {},
    Localization: {}
});

// set database
App.addRegions({ Window: ".main-window-region" });

App.addInitializer(function(options){
    var mainWindow = new App.View.MainWindow();
    try{
        App.Window.show(mainWindow);
    } catch(e) {
        console.error("Couldn't start app: ", e, e.stack);
    }
});

所以基本上我创建了MainWindow View，它看起来像：

(function(App) {
    "use strict";

    var MainWindow = Backbone.Marionette.LayoutView.extend({
        template: "#main-window-tpl",

        id: 'main-window',

        regions: {
            Content: '#content',
        },

        initialize: function() {
            //Application events
            //App.vent.on('movies:list', _.bind(this.showMovies, this));
        },

        onShow: function() {
            this.showMovies();
            //App.vent.trigger('main:ready');
        },

        showMovies: function(e) {
            var browser = new App.View.MovieBrowser();
            this.Content.show(browser);
        }
    });

    App.View.MainWindow = MainWindow;
})(window.App);

这是 MovieBrowser ，它应该进行收藏，获取它然后在节目中将其传递给 MovieList 。

(function(App) {
    'use strict';

    var MovieBrowser = Backbone.Marionette.LayoutView.extend({
        template: '#movie-browser-tpl',
        className: 'movie-browser',
        regions: {
            MovieList: '.movie-list-region'
        },

        initialize: function() {
            console.log('Init MovieBrowser');
            this.movieCollection = new App.Model.MovieCollection([], {});
            this.movieCollection.fetch();
        },

        onShow: function() {
            var ml = new App.View.MovieList({
                collection: this.movieCollection
            });
            this.MovieList.show(ml);
        }
    });

    App.View.MovieBrowser = MovieBrowser;
})(window.App);

所以轮流 MovieCollection 是（我想这是一个主要问题）：

(function(App) {
    "use strict";

    var MovieCollection = Backbone.Collection.extend({
        model: App.Model.Movie,

        initialize: function(models, options) {
            console.log('Init MovieCollection');
        },

        fetch: function() {
            this.add([{"imdb":"1598172","title":"Once Upon a Time in Brooklyn","year":2013,"MovieRating":"4.1","image":"http://zapp.trakt.us/images/posters_movies/217035-300.jpg","bigImage":"http://zapp.trakt.us/images/posters_movies/217035-300.jpg","torrents":{"1080p":{"url":"https://yts.re/download/start/739F9B2F114DB4B48D34DEE2787725FF0747F6F3.torrent","size":"1768399511","seed":"2712","peer":"1709"},"720p":{"url":"https://yts.re/download/start/E482DC66BA1117F3706FACD0292BD32F1CDFE5F5.torrent","size":"854590014","seed":"1553","peer":"828"}},"backdrop":"http://zapp.trakt.us/images/fanart_movies/217035-940.jpg","synopsis":"After being released from prison, Bobby goes back to the mob connected streets. When forced to make a life altering decision the truth is revealed that he was too blind to see.","genres":[],"certification":"R","runtime":116,"tagline":"","trailer":""}]);
        },
    });

    App.Model.MovieCollection = MovieCollection;
})(window.App);

MovieList 是：

(function(App) {
    "use strict";

    var SCROLL_MORE = 200;

    var ErrorView = Backbone.Marionette.ItemView.extend({
        template: '#movie-error-tpl',
        onBeforeRender: function() {
            this.model.set('error', this.error);
        }
    });

    var MovieList = Backbone.Marionette.CompositeView.extend({
        template: '#movie-list-tpl',
        tagName: 'ul',
        className: 'movie-list',
        itemView: App.View.MovieItem,
        itemViewContainer: '.movies',
        initialize: function() {
            console.log('Init MovieList')
            if (typeof this.collection !== 'undefined') {
                //this.listenTo(this.collection, 'loading', this.onLoading);
                //this.listenTo(this.collection, 'loaded', this.onLoaded);
                //this.collection.fetch();
            } else {
                console.trace()
            }
        },
    });

    App.View.MovieList = MovieList;
})(window.App);

这是 MovieItem ：

(function(App) {
    "use strict";

    var MovieItem = Backbone.Marionette.ItemView.extend({
        template: '#movie-item-tpl',
        tagName: 'li',
        className: 'movie-item',
        ui: {
            coverImage: '.cover-image',
            cover: '.cover'
        }
    });

    App.View.MovieItem = MovieItem;
})(window.App);

最后，电影模型是：

(function(App) {
    "use strict";

    var Movie = Backbone.Model.extend({
        idAttribute: 'imdb',
        initialize: function() {
        },
    });

    App.Model.Movie = Movie;
})(window.App);

因此，为了运行它，我基本上必须检查集合是否未定义。要查看它是否会继续，但确实如此，但应用程序本身无法正常工作，因为它创建了几个MovieList项目，添加了几个具有相同ID的ul元素。

这是html模板：

http://jsfiddle.net/tarazo8e/

这是包含JS文件的顺序：

<!-- App Initialization -->
{{ HTML::script('js/App/app.js') }}

<!-- Backbone Views and Controllers -->
{{ HTML::script('js/App/views/main_window.js') }}

{{ HTML::script('js/App/views/movie_browser/movie_browser.js') }}
{{ HTML::script('js/App/views/movie_browser/movie_item.js') }}

<!-- Backbone Models -->
{{ HTML::script('js/App/models/movie.js') }}
{{ HTML::script('js/App/models/movie_collection.js') }}


{{ HTML::script('js/App/views/movie_browser/movie_list.js') }}

我尝试将movie_list.js移动到几乎任何位置都没有运气。

任何帮助都会如此受到如此多的赞赏，因为这让我在过去的5天里疯狂了。

致谢：该代码取自旧版Popcorn-Time，仅用于学习目的。

编辑：

显示确切错误的实时版本：

http://googledrive.com/host/0Bxf4SpRPErmGQmdKNmoyaEVSbmc

Answer 1

尝试交换moview_browser.js和moview_item.js。应首先定义ItemView。

CompositeView的默认呈现模式假定采用分层递归结构。如果在未指定childView的情况下配置复合视图，则将获得为集合中的每个子项呈现的相同复合视图类。

Marionette CompositeView调用了集合中的每个元素添加，属于CompositeView ...为什么？

1 个答案: