Как я могу повторить ресурс в Ember.js

У меня есть ресурс страницы, который использует заголовок страницы в URL-адресе.

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'}));
});

В моей попытке есть две основные проблемы: мне нужно повторить просмотр страницы и не сохранить родительскую страницу в URL-адресе. Я получаю:

локальный/#/undefined/SUB_PAGE

Я направляюсь в правильном направлении? Может ли это быть выполнено только с одним ресурсом?

Спасибо заранее!

Ответ 1

Большинство изменений, которые я сделал, находятся в вашем html и шаблоне. Пожалуйста, не перепутайте ссылку Handlebars-helper с классическими anchors() и не изменяйте атрибут link-to tagname или, по крайней мере, дважды подумайте перед этим. Сначала переместите 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 вложен в страницу, маршрут должен быть вызван 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

Ответ 2

Рассматривали ли вы ресурсы вложенности?

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

Это позволило бы, по крайней мере, запросить структуру URL, но я не совсем уверен в ваших требованиях.