1

コレクションがあり、ルートが起動されたときにコレクション内のモデルにアクセスする必要があります。

App.Houses = Backbone.Collection.extend({
    model: App.House,
    url: API_URL,
})

App.houseCollection = new App.Houses()
App.houseCollection.fetch();


App.HouseDetailRouter = Backbone.Router.extend({
    routes: {
        '': 'main',
        'details/:id': 'details',
    },
    initialize: function() {

    },
    main: function() {
        App.Events.trigger('show_main_view');  
    },
    details: function(id) {
        model = App.houseCollection.get(id);
        console.log(model);
        App.Events.trigger('show_house', model);
    },
});

その結果はconsole.log(model)ですundefined。fetch()コレクションが呼び出しを終了していないため、これが当てはまると思いますか?

イベントに応答するビューがモデルを利用できるように、発生させているイベントにモデルをアタッチしたいと考えています。私は悪いアプローチを取っているかもしれませんが、よくわかりません。

イベントに応答するビューの 1 つ:

App.HouseDetailView = Backbone.View.extend({
    el: '.house-details-area', 
    initialize: function() {
        this.template = _.template($('#house-details-template').html());
        App.Events.on('show_house', this.render, this);
        App.Events.on('show_main_view', this.hide, this);
    },
    events: {
        'click .btn-close': 'hide',
    },
    render: function(model) {
          var html = this.template({model:model.toJSON()});
          $(this.el).html(html);
          $(this.el).show();
    },
    hide: function() {
        $(this.el).hide();
        App.detailsRouter.navigate('/', true);
    }   
});

編集: ややハッキーな修正: 詳細を参照してください()

App.HouseDetailRouter = Backbone.Router.extend({
    routes: {
        '': 'main',
        'details/:id': 'details',
    },
    initialize: function() {

    },
    main: function() {
        App.Events.trigger('show_main_view');  
    },
    details: function(id) {
        if (App.houseCollection.models.length === 0) {
           // if we are browsing to website.com/#details/:id
           // directly, and the collection has not finished fetch(),
           // we fetch the model.
           model = new App.House();
           model.id = id;
           model.fetch({
               success: function(data) {
                   App.Events.trigger('show_house', data);
               } 
           });
        } else {
            // if we are getting to website.com/#details after browsing 
            // to website.com, the collection is already populated.
            model = App.houseCollection.get(id);            
            App.Events.trigger('show_house', model);
        }
    },
});
4

1 に答える 1

1

コレクションの呼び出しがいつ完了したかを知るためにコールバックもイベントも使用していないため、コレクションのfetchフェッチでエラーが発生したか、必要なモデルがサーバーの応答に含まれていないか、ビューfetchが完了する前にルーティングされている可能性があります。

あなたのアプローチに関して、ここにいくつかのその他のヒントがあります：

  • ビューのコンストラクターのoptionsパラメーターでモデルをビューに渡すことをお勧めします。render()は引数を取らず、それを変更するのは型にはまらないと思います。
  • 常にビュー内thisから戻るrender()
  • this.template = _.templateに渡すオブジェクト リテラルにコードを移動できますextend。このコードは、個々のビューごとではなく、アプリの読み込みごとに 1 回だけ実行する必要があります
  • details今のところ最も簡単なのは、ルート関数内でモデルとビューのみをインスタンス化し、対象fetchの特定のモデルを呼び出し、successコールバックを使用してビューをいつレンダリングするかを知ることです。
于 2012-06-16T15:06:08.350 に答える