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 に答える