Question

问题

如何在Ember.js中管理支持描述内容的URL的路由，而不是数据架构？

详细

我一直在尝试设置一个简单的Ember.js应用程序，以便我可以创建原型来快速测试信息架构。我们的想法是在JS对象中有一组页面，并使用Ember.js在它们的层次结构中渲染这些页面。

例如，我有一个内容页面，作为一个孩子生活在导航页面中。然后，该网址变为#/navigation_id/article_id/。在数据对象中，页面位于同一级别，以允许页面同时在两个不同的位置“生活”。因此，标识GreatArticle的文章可能同时位于导航ContentNavigation和博客MyBlog中，因此这两个网址都属实 - #/ContentNavigation/GreatArticle和#/MyBlog/GreatArticle 。除了面包屑外，页面将呈现相同的内容。

代码

现在我循环遍历页面对象并动态创建路由：

data.js

// Page data
// Page types - magazine, navigation, article, calendar, search
var pages = [
    {
        id: 'magazine',
        type: 'magazine',
        title: 'My Magazine',
        subtitle: 'September 2014',
        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod dignissim ante sed laoreet. Morbi ullamcorper cursus sapien, in mollis arcu viverra eu.',
        children: []
    },
    {
        id: 'search',
        type: 'search',
        title: 'search',
    },
    {
        id: 'about',
        type: 'navigation',
        title: 'Info',
        children: [
            'education'
        ]
    },
    {
        id: 'education',
        type: 'navigation',
        title: 'Get  an education',
        content: 'Facts',
        children: [
            'bachelor',
            'masters'
        ]
    },
    {
        id: 'bachelor',
        type: 'article',
        title: 'Bachelor',
        content: 'Bachelor'
    },
    {
        id: 'masters',
        type: 'article',
        title: 'Masters',
        content: 'Masters'
    }
];

app.js

var App = Ember.Application.create({});

// Routing
function mapRoutes (pages, scope, path) {
    path = path || '';
    $.each(pages, function (index, id) {
        var page = data.pages.findBy('id', id),
        pagePath = path + '/' + id;
        if (!page || page.type === 'shortcut' || page.hasRoute) {

        } else {
            scope.resource(page.type, { path: '/' + id }, function () {
                if (page.children && page.children.length) {
                    mapRoutes(page.children, this, pagePath);
                }
            });
            page.hasRoute = pagePath;
            console.log(pagePath)
        }
    });
}
App.Router.map(function () {
    mapRoutes(data.app.menu, this);
});
App.NavigationRoute = Ember.Route.extend({
    model: function () {
        console.log('NavigationRoute.model');
        return {};
    }
});
App.MagazineRoute = Ember.Route.extend({
    model: function () {
        console.log('MagazineRoute.model');
        return {};
    }
});
App.ArticleRoute = Ember.Route.extend({
    model: function () {
        console.log('ArticleRoute.model');
        return {};
    }
});
App.SearchRoute = Ember.Route.extend({
    model: function () {
        console.log('SearchRoute.model');
        return {};
    }
});
App.CalendarRoute = Ember.Route.extend({
    model: function () {
        console.log('CalendarRoute.model');
        return {};
    }
});

App.ApplicationRoute = Ember.Route.extend({
    model: function () {
        var menu = [];

        $.each(data.app.menu, function (index, item) {
            if (data.pages[item]) {
                menu.push(data.pages[item]);
            }
        });

        return {
            title: data.app.title,
            menu: menu
        };
    }
});

问题

现在代码创建我应该的所有路线（/ magazine，/ about / uddannelse / bachelor，/ about / uddannelse / kandidat，/ about / uddannelse，/ about，/ search），但我有两个问题：

导航到嵌套页面时，将调用所有父路由和模板。因此，导航到/about/uddannelse/kandidat会在控制台中输出：
```
NavigationRoute.model 
NavigationRoute.model 
ArticleRoute.model
```
它还会像我期望的那样呈现navigation.hbs模板 - 而不是article.hbs模板。
路由不知道连接到它们的数据是什么，因为我没有使用任何Ember.js :id动态路由功能。我很乐意使用它，但嵌套导致更糟糕的错误。

摘要

如何以某种方式使用Ember.js创建动态路由，以便URL和应用程序本身反映内容层次结构？

我真的希望你能帮助我:)。

附录

我14日有this conversation with Gabor Babicz（@xeppelin），这可能对其他人有帮助。两张图来自：

使用Ember.js的内容分层URL

问题

详细

代码

data.js

app.js

问题

摘要

附录

0 个答案: