如何在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

你考慮過嵌套資源嗎？

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

這將至少啟用您要求的URL結構，但我不確定您的要求。

Answer 2

我所做的大多數修改都在你的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'
    }]
}];

HTML：

<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