4

摆弄大部分工作代码：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：

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

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

它按预期工作，虽然我不明白为什么。

更新 2：

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

例如，尝试直接访问 '/listings/1/videos/2' url 会引发错误“错误：断言失败：您在路由器中使用了动态段 video_id，但 App.Video 不存在并且您没有超越你的州的model钩子。” 我现在也在努力追捕。选择“查看视频”链接将很好地加载数据。

4

1 回答 1

4

jsFiddle 示例

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

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

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

这renderTemplate部分代码告诉 ember 将模板渲染到路由{{outlet}}提供的application路径中。默认情况下假设{{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'});   
    }
})
于 2013-02-12T21:14:25.253 回答