0

初めてバックボーンを取得していますが、ビューでコレクションをレンダリングするのに問題があります。

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

コンペティションモデル.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;
});

モデルが正しく読み込まれていることはわかっていますが、モデル コレクションをビューに渡してすべてのオブジェクトをレンダリングする方法がわかりません。

誰でも助けることができますか？ありがとう

4

1 に答える 1

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 の start 関数内で、バックボーン ルーターを作成せずに Backbone.history.start() を呼び出しているため、コンソール エラーも発生します。

于 2013-05-04T03:48:07.630 に答える