これを機能させるにはどうすればよいですか?
多くのメモがあるプロジェクトがあります。メモはitemControllerを使用して一覧表示されます。これらのメモには、ルートによって切り替えることができる拡張ビューが必要です(プロジェクト内のメモの表示ビューです)。ページにリストされている特定のメモを切り替えて展開するルートを取得するにはどうすればよいですか?
これを機能させるにはどうすればよいですか?
多くのメモがあるプロジェクトがあります。メモはitemControllerを使用して一覧表示されます。これらのメモには、ルートによって切り替えることができる拡張ビューが必要です(プロジェクト内のメモの表示ビューです)。ページにリストされている特定のメモを切り替えて展開するルートを取得するにはどうすればよいですか?
ヘルプについては、公式のEmberガイドを使用できます: http: //emberjs.com/guides/。そこにある例は、多くの投稿(あなたの場合はプロジェクト)を持つ単純なアプリケーションであり、各投稿には多くのコメント(あなたの場合のメモ)があります。唯一欠けているのは、メモを永続的に開くのではなく、切り替えるオプションです。
ガイドのみを使用すると、ルーターは次のようになります。
App.Router.map(function () {
this.resource('project', {
path: '/project/:project_id'
}, function () {
this.resource('note', { path: '/note/:note_id' }, function () {});
});
});
App.ProjectController = Ember.ObjectController.extend({
toggle: function(note) {
var isOpen = !note.get('isOpen');
if (isOpen) {
this.transitionTo('note', note);
} else {
this.transitionTo('project', this.get('content'));
}
this.get('notes').forEach(function(note) {
note.set('isOpen', false);
});
note.set('isOpen', isOpen);
}
});
次に、プロジェクトテンプレートにすべてのメモを一覧表示し、メモを開いて表示する場所を提供する必要があります。
<script type="text/x-handlebars" data-template-name="project">
{{#each note in notes}}
<li>
<button type="button" {{action toggle note}}>
{{note.name}}
</button>
</li>
{{/each}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="note">
{{description}}
</script>
明確にするために:ProjectControllerは、現在開いているプロジェクトにコンテンツが設定されたObjectControllerです。ProjectController#notesは、現在ロードされているプロジェクトのすべてのメモが配置される場所です。project / note.handlebarsは、プロジェクトページ内に表示されるように、メモを簡単に説明します。
これが実用的なフィドルです(いくつかの定型コードが追加されています):http://jsfiddle.net/ZcspT/6/
編集:
ルートのないバージョン(異なる部分のみ)は次のとおりです。
App.Router.map(function () {
this.resource('project', {
path: '/project/:project_id'
});
});
App.NoteView = Ember.View.extend({
templateName: 'note',
content: null,
classNameBindings: ['content.isOpen::hidden']
});
App.ProjectController = Ember.ObjectController.extend({
toggle: function(note) {
var isOpen = !note.get('isOpen');
this.get('notes').forEach(function(note) {
note.set('isOpen', false);
});
note.set('isOpen', isOpen);
}
});
テンプレート:
<script type="text/x-handlebars" data-template-name="project">
{{#each note in notes}}
<li>
<a {{action toggle note}} href="#">{{note.name}}</a>
</li>
{{/each}}
<div id="noteSection">
{{#each note in notes}}
{{view App.NoteView contentBinding="note"}}
{{/each}}
</div>
</script>
スタイルシート:
.hidden {
display: none;
}
例: http: //jsfiddle.net/ZfWhc/1/