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

Populating content on direct url visit in Ember.js pre-4

本文关键字：url 访问 填充 Ember js pre-4      更新时间：2023-09-26

使用最有效的代码：http://jsfiddle.net/VDA2p/16/

Route相信问题所在的摘录：

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

如果我选择了一个"视频"链接，url是'/listsing/1/videos'（例如），我的内容加载也很好。如果我通过地址栏直接访问这个网址，则不会检索到任何视频。我一直在尝试调用serialize（），但无法使其正常工作，我甚至不确定自己是否走上了正确的道路。我还注意到，一旦我直接访问该url，却没有得到任何视频，如果我直接访问"/列表"url（加载内容很好）并选择任何"视频"链接，则任何条目的视频内容都将不再加载。然而，如果我在"/listsings"url上刷新浏览器/应用程序，则"视频"链接下存在内容。

更新1:

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

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

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

更新2:

然而，当直接访问"/列表/1/视频"url而不是通过链接时，它确实断开了"查看视频"链接。它现在显示为"/listsing/noll/videos/1"，即使当你点击它时，单个视频加载也很好。使用后退按钮，您将返回到"/列表/1/视频"，其中所有"查看视频"链接中不再有"null"。

例如，试图直接转到'/lists/1/videos/2'url会引发错误"错误：断言失败：您在路由器中使用了动态段video_id，但App.video不存在，并且您没有覆盖您所在州的model挂钩。"我现在也在努力查找该错误。不过，选择"查看视频"链接会很好地加载数据。

jsFiddle示例

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

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

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

代码的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'});   
    }
})
相关文章：