Ember js：制作动态路由、模型和控制器答案

【问题标题】：Ember js: Making dynamic routes and models and controllersEmber js：制作动态路由、模型和控制器
【发布时间】：2016-09-26 20:35:32
【问题描述】：

我必须为 12 条不同的路由复制相同的行为（嵌套路由、模型、控制器功能、存储功能）。唯一的区别在于它们的模型属性，模板也将被更新。因此，例如，我有两个名为 Notes 和 Tasks 的路由，它们以相同的方式获取，并且在控制器中也具有相同的功能，但 Tasks 路由具有属性，例如 Subject 和 Text，而 Notes 具有 Name 和 Description，但即使是模板功能也是一样。

不为此类路由重复相同功能的最佳方法是什么？是否可以创建一个足够通用的模型、路由或控制器，以便 ember.js 可以决定运行时间来为每个单独的路由做一些事情？我可以为我拥有的 12 条不同的路线重复使用一个模型/控制器/路线的功能吗？

【问题讨论】：

标签： ember.js ember-data

【解决方案1】：

注意：惯用的 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 属性。

部分：

<!-- 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'}}

覆盖模板名称：

<!-- 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，同时分别保留显示名称名称/主题和文本/描述）。如果不是这种情况，您将需要一种方法来引用要在模板中引用的属性（例如，是否使用 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',
});

【讨论】：