Question

我有一个集合，我需要在路由被触发时访问集合中的模型：

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()调用？

我想将模型附加到我正在触发的事件上，以便响应事件的视图可以使用它。我可能会采取不好的方法，我不确定。

响应该事件的其中一个观点：

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

编辑：有点hacky修复：查看详情（）

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

Answer 1

由于您既不使用回调也不使用事件来知道集合的fetch调用何时完成，否则可能是在获取集合时产生错误，或者您想要的模型未包含在服务器响应中，或者您是在fetch完成之前路由到视图。

至于你的方法，这里有一些杂项提示：

最好将模型传递给视图构造函数的options参数中的视图。 render()没有任何争议，我认为改变它是不合常理的。
始终从您的观点中的this返回render()
您可以将this.template = _.template代码移至您传递给extend的对象文字。此代码仅需要针对每个应用加载运行一次，而不是针对每个单独的视图运行
目前最简单的方法是在details路由功能中仅实例化模型和视图，在感兴趣的特定模型上调用fetch，并使用success回调知道何时渲染视图。

骨干路由器和收集问题

1 个答案: