Ember js: Создание динамических маршрутов и моделей и контроллеров

Question

Я должен повторить то же поведение (вложенные маршруты, модели, функции контроллера, функции магазина) для 12 различных маршрутов. Единственное различие заключается в их атрибутах модели, для которых также будет обновлен шаблон. Так, например, у меня есть два маршрута с именем «Примечания» и «Задачи», которые выбираются одинаково и также имеют одинаковую функциональность в контроллере, но маршрут «Задачи» имеет атрибуты «Тема» и «Текст», тогда как «Примечания» имеют имя и описание, но даже функциональность шаблона тоже самое.

Какой был бы лучший подход, чтобы не повторять одну и ту же функциональность для таких маршрутов? Можно ли создать одну модель или маршрут или контроллер, достаточно общий, чтобы ember.js мог определить время выполнения для каждого отдельного маршрута? Могу ли я повторно использовать одну модель/контроллер/функцию маршрута для 12 различных маршрутов, которые у меня есть?

Answer 1

Примечание: Idiomatic Ember 2.x поддерживает использование компонентов через контроллеры, но я ответил, используя контроллеры, потому что заданный вами контроллер.

Вы можете использовать наследование путем определения базового маршрута, который содержит вашу общую функциональность, и использует свойства, которые будут определены дочерними классами, чтобы настроить поведение.

// routes/base.js 
import Ember from 'ember'; 

export default Ember.Route.extend({ 
    // shared route definition 
    modelName: null, 
    attributes: [], 
}); 

// routes/note.js 
import BaseRoute from 'base'; 

export default BaseRoute.extend({ 
    modelName: 'note', 
    attributes: ['name', 'description'], 
}); 

// routes/task.js 
import BaseRoute from 'base'; 

export default BaseRoute.extend({ 
    modelName: 'task', 
    attributes: ['subject', 'text'], 
}); 

Вы можете сделать то же самое для контроллеров. Наследования шаблонов нет, но вы можете либо использовать частичные, либо переопределить атрибут templateName на маршруте.

Partials:

<!-- template/base.hbs --> 
<p>Template Markup for {{modelName}}</p> 

// controllers/note.js 
import BaseController from 'base'; 

export default BaseController.extend({ 
    modelName: 'note', 
}); 

<!-- template/note.hbs --> 
{{partial 'base'}} 

Перекрытие TemplateName:

<!-- templates/base.hbs --> 
<p>Base Template Markup</p> 

// routes/note.js 
export default BaseRoute.extend({ 
    modelName: 'note', 
    attributes: ['name', 'description'], 
    templateName: 'base', 
}); 

С наследованием, то проще, если ваши атрибуты фактически разделяют имя свойства и различаются только их отображаемое имя (например, атрибут для name/subject - title, а атрибут для text/description - text при сохранении отображаемых имен Название/Тема и Текст/Описание respectivel у). Если это не так, вам понадобится способ ссылаться на свойства, которые вы хотите ссылаться в шаблоне (например, использовать ли model.name или model.subject), и это станет довольно грязным. Гораздо легче определить displayForText:

<!-- template/base.hbs --> 
<p>{{displayForTitle}}: {{model.title}}</p> 
<p>{{displayForText}}: {{model.text}}</p> 

// controllers/note.js 
import BaseController from 'base'; 

export default BaseController.extend({ 
    displayForTitle: 'Name', 
    displayForText: 'Description', 
});