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是当前加载项目的所有注释。项目/ 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/

Ember扩展子控制器/视图

1 个答案: