Ember js：動的ルートとモデルとコントローラの作成

Question

12の異なるルートの場合と同じ動作（ネストされたルート、モデル、コントローラ機能、ストア機能）を複製する必要があります。唯一の違いは、テンプレートも更新されるモデル属性に違いがあります。 たとえば、NotesとTaskという2つのルートがあり、同じ方法でフェッチされ、コントローラ内で同じ機能を持ちますが、TasksルートにはSubjectとTextがあり、NotesにはNameとDescriptionがありますがテンプレート機能であっても同じ。

このようなルートで同じ機能を繰り返さないようにするにはどうすればよいでしょうか？ ember.jsが実行時間を決定して個々のルートごとに行うことができるように、1つのモデル、ルート、またはコントローラを汎用的に作成できますか？私が持っている12の異なるルートに対して1つのモデル/コントローラ/ルートの機能を再利用できますか？

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

コントローラでも同じことができます。テンプレートの継承はありませんが、経路内でpartial32を使用するか、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'}} 

オーバーライド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ですが、表示名は名前/件名、テキスト/説明を保持していますy）。そうでない場合は、テンプレート内で参照するプロパティ（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', 
});