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

Question

摆弄大部分工作代码:http://jsfiddle.net/VDA2p/16/

Route的摘录相信问题出在哪里:

// #/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”网址上刷新我的浏览器/应用程序，则内容存在于“视频”链接下。

更新 1:

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

// #/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”，其中所有“查看视频”链接不再包含“空”。

例如，尝试直接转到 '/listings/1/videos/2' url 会抛出错误“错误:断言失败:您在路由器中使用了动态段 video_id，但 App.Video 没有存在并且您没有覆盖您所在州的 model Hook 。”我现在也在努力寻找它。不过，选择“查看视频”链接会很好地加载数据。

Answer 1

jsFiddle example

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

例如，如果您直接输入 URL /listings/1/videos/2 将调用 App.ListingsRoute 的方法，然后 App .ListingRoute，然后是 App.VideosRoute，最后是 App.VideosVideoRoute。在您的旧路由器中，平面特性不允许正确处理 URL 部分 /listings 或 /listings/:listing_id，从而导致您看到的错误。

由于添加了嵌套，模板和路由的一些名称与原始示例略有不同。检查emberjs routing docs如果您想了解有关嵌套路由命名方案的更多详细信息。

代码的 renderTemplate 部分告诉 ember 将模板呈现到 application 路由提供的 {{outlet}} 中。默认情况下假设每个嵌套路由中都有嵌套的 {{outlet}}。

路由器:

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