ember.js - Смесете маршрути за ресурси с обикновени маршрути за нестандартно вложено оформление

Искам следното оформление: въведете описание на изображението тук

Така че когато в /courses показвам всички курсове в шаблон за целия екран, но когато потребител навигира до курс, напр. /courses/2, след това става вложен изглед със списък с курсове от лявата страна и страницата с подробности за курса в основната област.

Опитах следната настройка, но не мога да я накарам да работи:

this.resource('courses', function() {
    this.resource('course', { path: '/:course_id' });
});
this.route('allcourses', {path: '/courses'});

със следните дефиниции на маршрута:

App.AllcoursesRoute = App.Route.extend({
  model: function() {
    return this.store.find('course');
  },
  renderTemplate: function() {
    this.render('allcourses', {
      into: 'application'
    })
  }
});

App.CoursesRoute = App.Route.extend({
  model: function() {
    return this.modelFor('allcourses');
  },
  renderTemplate: function() {
    this.render('courses', {
      into: 'application'
    })
  }
});

App.CourseRoute = App.Route.extend({
  model: function(params) {
    return this.store.find('course', params.course_id);
  },
  renderTemplate: function() {
    this.render('course', {
      into: 'courses'
    });
  }
});

Понастоящем получавам шаблона „allcourses“, когато в /courses обаче щракването върху връзката към всеки курс се опитва да изобрази шаблона на курса в изход в шаблона за всички курсове, а не в шаблона за курсове, което е, което искам да се случи.


view nested-routes ember.js
person cjroebuck    schedule 13.12.2013    source източник

Отговори (3)


arrow_upward
0
arrow_downward

и какво ще кажеш за промяна на маршрутите?

this.resource('courses');
this.resource('course', { path: '/courses/:course_id' });
this.route('allcourses', { path: '/courses' });
person fanta    schedule 13.12.2013

arrow_upward
0
arrow_downward

и courses и allcourses имат един и същ път, това поведение е недефинирано и вероятно обърква ember да си мисли, че вече сте в маршрута.

this.resource('courses', function() {  // this defaults to /courses
    this.resource('course', { path: '/:course_id' });
});
this.route('allcourses', {path: '/courses'});
person Kingpin2k    schedule 13.12.2013
comment
Да, исках да изтрия обичайния маршрут на курсове с шаблона allcourses, но след това да се върна към обичайния шаблон на курсове веднъж в маршрута /courses/:id. Не изглежда възможно без дефиниране на нов url за „всички курсове“ - person cjroebuck; 13.12.2013
comment
Разкъсвам се между това да кажа много дефинирани маршрути или потребителски интерфейс с черна магия въз основа на маршрута, в който се намирате. (като коментара в отговора на edpaez) - person Kingpin2k; 13.12.2013

arrow_upward
0
arrow_downward

Имайки предвид отговора на kingpin2k и премахвайки маршрута allcourses:

Какво ще кажете за използването на CoursesIndexRoute за показване на „широкия“ шаблон на всички курсове. И използване на CourseRoute за показване както на страничната лента на всички курсове (използвайки съдържанието и контролера от неговия родителски маршрут), така и подробностите за курса.

App.CourseRoute = Ember.Route.extend({

  renderTemplate: function() {
    //the main content
    this.render('course', {
      outlet: 'course',
    });
    // the sidebar
    var controller = this.controllerFor('courses');
    this.render('side-bar', {
      into: 'courses',
      outlet: 'side-bar',
      controller: controller
    });
  }

});

Може да се наложи да използвате различни изходи за показване на широкия шаблон, страничната лента и подробностите.

Дано помогне!

person edpaez    schedule 13.12.2013
comment

Имате предвид височината на contentSize на табличния изглед. Първо трябва да добавите ограничение на височината за табличния изглед. След като таблицата приключи със зареждането, направете следното:

self.tableViewHeightConstraint.constant = self.tableView.contentSize.height;
- person Kingpin2k; 13.12.2013