뷰 렌더 모델

처음으로 백본을 가져 오는 중이고 내 컬렉션을 렌더링하는 데 어려움을 겪고 있습니다.뷰 렌더 모델

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

는

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

,617을 app.js

경쟁-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);

로 : 당신의 app.js에 또한

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

, 시작 함수 내에서, 당신은 Backbone.history.start()를 호출하는 백본을 만들지 않고 라우터, 또한 콘솔 오류를 제공합니다.

출처

2013-05-04 03:48:07

뷰 렌더 모델

답변

관련 문제