在视图中呈现模型

Question

我是第一次拿起backbone，我在获得我的视图来呈现我的集合时遇到了一些问题。

main.js

/*global require*/
'use strict';

require.config({
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        },
    },
    paths: {
        app: 'app',
        jquery: '../components/jquery/jquery',
        backbone: '../components/backbone-amd/backbone',
        underscore: '../components/underscore-amd/underscore',
        competitions: 'collections/competition-collection',
        competitionModel: 'models/Competition-model',
        templates: 'templates'
    }
});

require([
    'backbone',
    'app',
    'competitions',
    'competitionModel',
    'views/competition-view',
    'templates'
], function (
    Backbone,
    App,
    Competitions,
    CompetitionModel,
    CompetitionsView
    ) {
        window._app = new App(
            Competitions,
            CompetitionModel,
            CompetitionsView
        );

        window._app.demoData();
        window._app.start();
});

app.js

define([], function() {

    var App = function(Competitions,CompetitionModel,CompetitionsView) {
        // Our models will be instantiated later as needed later.
        this.Models.CompetitionModel = CompetitionModel;
        this.Collections.Competitions = Competitions;
        this.Collections.competitions = new Competitions();
        this.Views.competitionsView = new CompetitionsView();


        //console.log(this.Views.competitionsView)
    };
    App.prototype = {
        Views: {},
        Models: {},
        Collections: {},
        start: function() {

            this.Views.competitionsView.render();
            Backbone.history.start();
        },
        // TODO: We'll get rid of this or move later ... just "spiking" ;)
        demoData: function() {
            var me = new this.Collections.Competitions(
                [
                    {
                        name: 'Some Name',
                    },
                    {
                        name: 'Other Name',
                    }
                ]
            );

            console.log("***** Demo Competitions Created *****");
        }
    };
    return App;
});

Competition-model.js

define([
    'underscore',
    'backbone',
], function (_, Backbone) {
    'use strict';

    var CompetitionModel = Backbone.Model.extend({
        defaults: {
        },
        initialize: function(){
            console.log(this.attributes);
        }
    });
    this.listenTo(Competitions, 'add', function(){
        console.log("bla")
    });
    return CompetitionModel;
});

competition-collection.js

define([
    'underscore',
    'backbone',
    'models/competition-model'
], function (_, Backbone, CompetitionModel) {
    'use strict';

    var CompetitionCollection = Backbone.Collection.extend({
        model: CompetitionModel
    });

    return CompetitionCollection;
});

competition-view.js

define([
    'jquery',
    'underscore',
    'backbone',
    'templates',
    'competitions',
], function ($, _, Backbone, JST, Competitions) {
    'use strict';

    var CompetitionView = Backbone.View.extend({
        template: JST['app/scripts/templates/competition.ejs'],
        render: function() {
            console.log(this.model);
          }
    });
    console.log("yo")


    return CompetitionView;
});

我知道模型已正确加载，但我似乎不知道如何将模型集合传递给视图并呈现所有对象。

有人能帮上忙吗？谢谢

Answer 1

您已正确创建了视图、集合和模型，但尚未在集合和视图之间创建链接。您需要将集合传递给视图，并在视图中使用该集合来呈现所有模型。

在您的app.js更换中：

this.Views.competitionsView = new CompetitionsView();

通过以下方式：

this.Views.competitionsView = new CompetitionsView({collection: this.Collections.competitions});

现在，您在视图中有了集合对象的引用。现在内部竞争-view.js替换：

console.log(this.model);

通过以下方式：

this.collection.each(function (model) {
    console.log(model);
});

另外，在您的app.js中，在启动函数内部，您正在调用Backbone.history.start()，而没有创建主干路由器，这也会给出一个控制台错误。