Question

我第一次拿起骨干，而我在查看我的收藏时遇到了一些麻烦。

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

竞争-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;
});

竞争collection.js

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

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

    return CompetitionCollection;
});

竞争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});

现在，您在视图中有了对象集合的引用。现在在competition-view.js里面取代：

console.log(this.model);

使用：

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

同样在您的app.js内部启动功能中，您调用Backbone.history.start（）而不创建Backbone路由器，这也会导致控制台错误。

在视图中渲染模型

1 个答案: