0

私はこの 2 週間、Backbone.js の学習と、Require.js を使用したアプリのモジュール化に取り組みました。しかし、初期化とフェッチのプロセス全体で得られないものがあるようです。

2 つのルートがあり、1 つはコレクション全体を表示し、もう 1 つは個々のモデルのみを表示します。そして、両方のルートのいずれかでアプリを起動できるようにしたいと考えています。

コレクションの URL の読み込みを開始し、後で単一のモデルの URL を読み込むと、すべてが期待どおりに機能します。単一のモデルへの URL ルートを使用してアプリを起動するとTypeError: this.model is undefined this.$el.html(tmpl(this.model.toJSON()));、ビューでエラーが発生しました。

モデルのデフォルトを設定すると、ビューがレンダリングされますが、実際のデータでフェッチされません。また、モデルのフェッチ関数で成功イベントを処理しようとしましたが、うまくいきませんでした。

router.js

define(['jquery','underscore','backbone','models/offer','collections/offers','views/header','views/event','views/offer/list', 
], function($, _, Backbone, OfferModel, OffersCollection, HeaderView, EventView, OfferListView){

var AppRouter = Backbone.Router.extend({    

routes: {
    'event/:id' : 'showEvent',
  '*path': 'showOffers'
},

initialize : function() {       
    this.offersCollection = new OffersCollection();
    this.offersCollection.fetch();
    var headerView = new HeaderView();
    $('#header').html(headerView.render().el);          
},

showEvent : function(id) {
    if (this.offersCollection) {
        this.offerModel = this.offersCollection.get(id);
    } else {
        this.offerModel = new OfferModel({id: id});
        this.offerModel.fetch();
    }       
    var eventView = new EventView({model: this.offerModel});    
    $('#main').html(eventView.render().el);     
},

showOffers : function(path) {
    if (path === 'betting' || path === 'score') {
        var offerListView = new OfferListView({collection: this.offersCollection, mainTemplate: path});  
      $('#main').html(offerListView.render().el) ;       
    }       
},    
});

var initialize = function(){    
  window.router = new AppRouter;
  Backbone.history.start();
};

return {
  initialize: initialize
};
});

ビュー/event.js

define(['jquery','underscore','backbone','text!templates/event/main.html',
], function($, _, Backbone, eventMainTemplate){

var EventView = Backbone.View.extend({
    initalize : function(options) {
        this.model = options.model; 
        this.model.on("change", this.render);       
    },

    render : function() {
        var tmpl = _.template(eventMainTemplate);
        this.$el.html(tmpl(this.model.toJSON()));
        return this;
    }
});

return EventView;   
});
4

1 に答える 1

1

ルーターのメソッドでOffersCollection を作成して取得しているinitializeため、elseブロックは常に真実であるため、showEventヒットすることはありません。this.offersCollection

コメントの後、これを行う必要があると思います：

showEvent : function(id) {
    var that = this;
    var show = function(){
       var eventView = new EventView({model: that.offerModel});    
       $('#main').html(eventView.render().el); 
    };
    // offersCollection is always defined, so check if it has the model
    if (this.offersCollection && this.offersCollection.get(id)) {
        this.offerModel = this.offersCollection.get(id);
        show();
    } else {
        this.offerModel = new OfferModel({id: id});
        this.offerModel.fetch().done(function(){
           // model is fetched, show now to avoid your render problems.
           show();
        });
        // alternatively, set the defaults in the model,
        // so you don't need to wait for the fetch to complete.
    }       

}
于 2013-03-01T15:40:16.980 に答える