0

これを機能させるにはどうすればよいですか?

多くのメモがあるプロジェクトがあります。メモはitemControllerを使用して一覧表示されます。これらのメモには、ルートによって切り替えることができる拡張ビューが必要です(プロジェクト内のメモの表示ビューです)。ページにリストされている特定のメモを切り替えて展開するルートを取得するにはどうすればよいですか?

4

1 に答える 1

1

ヘルプについては、公式の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/

于 2013-02-11T08:22:41.120 に答える