javascript - Marionette CompositeView 调用从集合中添加的每个元素，这些元素属于 CompositeView...为什么？

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);

而电影列表是:

(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。

The default rendering mode for a CompositeView assumes a hierarchical, recursive structure. If you configure a composite view without specifying an childView, you'll get the same composite view class rendered for each child in the collection.