Render model in view

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

Я знаю, что модели загружены правильно, но я не могу показаться, чтобы выяснить, как передать коллекцию моделей для представления и визуализации всех объектов.

Может ли кто-нибудь помочь? Thanks

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() без создания Backbone маршрутизатор, который также дает консольную ошибку.