ember.js - Ember 展开子控制器/视图

Question

我如何构建它以使其工作？

我有很多笔记的项目。使用 itemController 列出注释。我需要这些笔记有一个可以通过路线切换的扩展视图（它是项目内部笔记的显示视图）。如何获得一条路线来切换页面上列出的特定注释以展开？

Answer 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/