Backbone.js 主干路由器和收集问题

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

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）

的结果是

未定义。我认为这是因为集合尚未完成
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);
    }   
});


编辑：有点骇客修复：请参阅详细信息（）

由于您既不使用回调也不使用事件来知道集合的
fetch
调用何时完成，因此可能是提取集合时产生了错误，或者服务器响应中不包含所需的模型，或者是在
fetch
完成之前路由到视图

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


最好将模型传递给视图构造函数的
options
参数中的视图
render（）
不接受任何参数，我认为改变这一点是非常不传统的
始终从视图中的
render（）
返回此

您可以将
this.template=..template
代码移动到传递给
extend
的对象文本。此代码只需要在每次应用加载时运行一次，而不是针对每个单独的视图
目前，最简单的方法可能是在
details
route函数中实例化一个模型和一个视图，对感兴趣的特定模型调用
fetch
，然后使用
success
回调来知道何时渲染视图
由于您既不使用回调也不使用事件来知道集合的
获取
调用何时完成，可能是获取集合产生了错误，或者您想要的模型未包含在服务器响应中，或者是在
获取
完成之前路由到视图

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


最好将模型传递给视图构造函数的
options
参数中的视图
render（）
不接受任何参数，我认为改变这一点是非常不传统的
始终从视图中的
render（）
返回此

您可以将
this.template=..template
代码移动到传递给
extend
的对象文本。此代码只需要在每次应用加载时运行一次，而不是针对每个单独的视图
目前，最简单的方法可能是在
details
route函数中实例化一个模型和一个视图，对感兴趣的特定模型调用
fetch
，然后使用
success
回调来知道何时渲染视图
您确定该系列的型号具有该id

？您可以

console.log（App.houseCollection.models）

在调用

console.log（App.houseCollection.models）

时查看您是否尝试过根据需要获取集合？我不确定您的意思。集合是在应用程序开始时获取的。我的意思是在需要时获取集合。或者获取集合并使用它来构建路由器将路由的链接；您可以监听

“重置”

事件，并使用该事件触发呈现该集合的内容

details/：id

链接。你确定集合中有一个具有该

id

的模型吗？你可以

console.log（App.houseCollection.models）

在调用

console.log（App.houseCollection.models

时查看您是否尝试过根据需要获取集合？我不确定您的意思。集合是在应用程序开始时获取的。我的意思是在需要时获取集合。或者获取集合并使用它来构建路由器将路由的链接；您可以监听

“重置”

事件，并使用该事件触发呈现该集合的内容

details/：id

链接。我添加了我的更改，但这些更改看起来非常粗糙……我想我可能需要重新思考我的结构。这让我思考……是否应该在main（）中实例化集合路由？我不太确定路由器的功能使用

集合。获取
来检查模型。这比检查长度更好，因为它更准确地反映了您所关心的内容。模型是否存在。如果没有返回模型，则获取模型并将其添加到集合中，以便下次可以看到。我添加了我的更改，但它们看起来非常粗糙…我想我可能需要重新思考我的结构这让我思考…是否应该在main（）中实例化集合路由？我不太确定路由器的功能使用
集合。获取
来检查模型。这比检查长度更好，因为它更准确地反映了您所关心的内容。模型是否存在。如果这没有返回模型，则获取模型并将其添加到集合中，以便下次可以看到它。
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);
        }
    },
});