Javascript 在Ember.js pre-4中填充直接url访问的内容

摆弄最有效的代码：

问题所在的路线相信摘录：

// #/listings/:listing_id/videos
App.VideosRoute = Ember.Route.extend({
    model: function(params) {
        return this.modelFor('listing');
    }
});

如果我选择一个“视频”链接，url是“/listings/1/videos”（例如），我的内容加载很好。如果我通过地址栏直接访问此url，则不会检索任何视频。我一直在玩弄对serialize（）的调用，但无法让它工作，而且我甚至不确定自己是否走上了正确的道路。我还注意到，一旦我直接访问url而没有视频，如果我直接转到“/listings”url（加载内容很好）并选择任何“视频”链接，则任何条目都不再加载视频内容。但是，如果我在“/listings”url上刷新浏览器/应用程序，则“videos”链接下存在内容

更新1:

如果我将上面的原始代码段改为

// #/listings/:listing_id/videos
App.VideosRoute = Ember.Route.extend({
    model: function(params) {
    return App.Listings.find(params.listing_id);
    }
});

虽然我不明白为什么，但它还是像预期的那样工作

更新2:

但是，当直接而不是通过链接访问“/listings/1/videos”url时，它确实中断了“查看视频”链接。它现在显示为“/listings/null/videos/1”，即使当您单击它时，单个视频加载也很正常。使用“后退”按钮可返回“/listings/1/videos”，其中所有“查看视频”链接中不再包含“null”

例如，尝试直接转到“/listings/1/videos/2”url时，会抛出“错误：断言失败：您在路由器中使用了动态段视频id，但App.video不存在，并且您没有覆盖您所在州的

模型

挂钩”的错误。我现在也正在查找该错误。选择“查看视频”链接将很好地加载数据。

您要做的是使用嵌套路由结构。这允许每个嵌套级别在评估路由时进行序列化/反序列化

例如，如果您直接在URL中键入

/listings/1/videos/2

调用

App.ListingRoute

的方法，然后是

App.ListingRoute

，然后是

App.VideosRoute

，最后是

App.VideosVideoRoute

。在旧路由器中，扁平属性不允许正确处理URL节

/listings

或

/listings/：清单\u id

以导致您看到的错误

由于添加了嵌套，模板和管线的某些名称与原始示例略有不同。如果需要有关嵌套管线命名方案的详细信息，请选中

代码的

renderTemplate

部分告诉ember将模板呈现到

应用程序提供的
{{outlet}}
路径中。默认设置是假设每个嵌套路由中都有嵌套的
{{outlet}
s

路由器：

App.Router.map(function() {
    this.resource('listings', function() {
        this.resource('listing', { path: '/:listings_id' }, function(){
            this.resource('videos', function() {
                this.route('video', { path: '/:videos_id' });
            });
        });
    });
});

路线：

// #/index
App.IndexRoute = Ember.Route.extend({
    redirect: function(){
            this.transitionTo('listings');
    }
});

// #/listings
App.ListingsIndexRoute = Ember.Route.extend({
    model: function() {
        return App.Listings.find();
    },
    renderTemplate: function() {
        this.render({into: 'application'});   
    }
});

// #/listings/:listing_id
App.ListingRoute = Ember.Route.extend({});

// #/listings/:listings_id/videos
App.VideosIndexRoute = Ember.Route.extend({
    model: function(params) {
        return this.modelFor('listing').get("videos");
    },
    renderTemplate: function() {
        this.render({into: 'application'});   
    }
});

// #/listings/:listings_id/videos/:videos_id
App.VideosVideoRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render({into: 'application'});   
    }
})

谢谢，这很有道理。使用它时，视图中生成的url确实填充了正确的上下文等，但是如果我使用特定的url，例如“/listings/1/videos”，并直接转到它，则不会呈现任何内容。其他URL也是如此。如果我向前导航，一切都很好，但是如果我尝试直接转到一个，或者在转到一个后使用“后退”按钮，则应用程序模板的路径中不会呈现任何内容。我更新了答案以解决这些问题。主要的变化是使用
ListingsIndexRoute
和
VideosIndexRoute
来处理
/listings
和
/listings/1/videos
URL。我还稍微调整了路由定义，以利用ember的内置约定，使用
:listings\u id
和
:videos\u id
动态段值自动调用
find（）
，从而减少了代码量。