如何在Ember.js中重复一个资源

Question

我有一个页面资源,使用网址中的页面标题.

App.Router.map(function () {
    this.resource('page', {
        path: '/:page_id'
    });
});

App.PageRoute = Ember.Route.extend({
  serialize: function(model) {
    return { page_id: model.title};
  }
});

这在jsbin中工作得很好.但是,我想将子页面嵌套在url中,如下所示:

本地主机/#/ main_page/SUB_PAGE

我试图创建一个子资源(jsbin),但我不确定它是否是正确的方法.

App.Router.map(function () {
    this.resource('page', {path: '/:page_id'},
                  this.resource('subpage', {path: '/:page_id/:subpage_id'}));
});

我的尝试有两个主要问题:我必须重复我的页面视图,并且不会在网址中保留父页面.我越来越:

本地主机/#/未定义/ SUB_PAGE

我正朝着正确的方向前进吗？这只能用一种资源来完成吗？

提前致谢!

Answer 1

我所做的大部分修改都在您的 html 和模板中。请不要将 Handlebars 的链接帮助程序与经典锚点 () 混合在一起，也不要更改链接标记名属性，或者在这样做之前至少要三思而后行。首先 - 将 testData 移动到全局可访问的对象，以便您可以在菜单中使用它：

JavaScript：

App.CustomRoutes = [{
    id: 1,
    title: 'single'
}, {
    id: 2,
    title: 'subpages',
    pages: [{
        id: 3,
        title: 'subpage1'
    }, {
        id: 4,
        title: 'subpage2'
    }, {
        id: 5,
        title: 'subpage3'
    }]
}];

网页：

<ul class="navbar-nav nav">
  {{#each page in App.CustomRoutes}}
    <li class='menu-item'>
      {{#link-to 'page' page.title}}
        {{page.title}}
        {{#if page.pages}}
          <b class="caret"></b>
        {{/if}}
      {{/link-to}}
      <span class='subpages'>
        <ul>
          {{#each subpage in page.pages}}
            <li>
              {{#link-to 'page.subpage' page.title subpage.title}}
                {{subpage.title}}
              {{/link-to}}
            </li>
          {{/each}}
        </ul>
      </span>
    </li>
  {{/each}}
</ul>

然后我修复了你的路由器声明。当您定义嵌套路由时， this.resource() 的第三个参数是一个函数，与传递给 App.Router.map() 的函数非常相似。

App.Router.map(function () {
    this.resource('page', {path: '/:page_id'},
                  function() { this.route('subpage', {path: '/:subpage_id'});});
});

最后，这是您的路线的定义。因为Subpage嵌套在Page中，所以该路由必须称为PageSubpageRoute。如果它嵌套在 Foo 中，那么它就是 FooSubpageRoute。注意：路由器内部的 this.render() 调用具有以下参数：(, )。

App.PageSubpageRoute = Ember.Route.extend({
  model: function(params) {
    var parentModel = this.modelFor('page');
    var res = $.grep(parentModel.pages, function (e) {
          if (e.title == params.subpage_id) {
            return e;
          }
        });
    return res[0];
  },
  serialize: function(model) {
    return { subpage_id: model.title};
  },
  renderTemplate: function() {
    this.render('subpage');
  }
});

App.PageRoute = Ember.Route.extend({
  serialize: function(model) {
    return { page_id: model.title};
  },
    model: function (params) {
        return $.grep(App.CustomRoutes, function (e) {
          if (e.title == params.page_id) {
            return e;
          }
        })[0];
    }
});

这是代码：jsbin