渲染模型的視圖

我第一次撿起骨架，並且在使我的視圖呈現我的集合時遇到了一些麻煩。渲染模型的視圖

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

渲染模型的視圖

回答

相關問題