渲染模型的视图

我第一次捡起骨架，并且在使我的视图呈现我的集合时遇到了一些麻烦。渲染模型的视图

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

我知道，模型加载正确，但我似乎无法弄清楚如何模型集合传递给视图和渲染的所有对象。

任何人都可以帮忙吗？谢谢

来源

2013-05-04 jribeiro

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

在你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（），而无需创建一个骨干路由器，这也是一个控制台错误。

来源

2013-05-04 03:48:07

渲染模型的视图

回答

相关问题