ember.js - 如何使用控制器和视图组织 ember 应用程序

Question

控制器、视图和其他 ember 构造的最佳组合是什么，可以将应用程序与下面线框中的基本功能组合在一起？

我不是在寻找详细的实现，而是在寻找如何构建 Ember 应用程序以及如何将控制器、视图、模板等作为构建块进行推理的灵感。

我的假设是这个屏幕位于ContactsRoute并且ContactsController是一个ArrayController包含Contact模型（选定的状态只是 UI 而不是持久化）。

Answer 1

一些想法，因为我有类似的运行：

我在这里看到两个布局列：

Left Col：是一个带有关联控制器的 TreeNavView。如果您输入 #/contacts（和 #/contacts/），则会选中它

Right Col：带有关联控制器的 ContactsView。视图很可能由较小的视图原子（如输入控件等）组装而成。

关于控制器的特别说明：根据我的经验，您在 Ember 中或多或少地被迫在控制器和视图之间建立 1:1 的关系——因此共享控制器是一件坏事，而且很难管理。

应用程序视图包含 HTML/CSS 布局，并且两列都有两个出口。

如何将相应的视图渲染到插座中？对于左列，我将直接从应用程序视图模板中“调用”视图，如下所示：

{{view App.TreeNav}}

我将通过相应的路由器映射填充“正确的出口”：

this.route('contacts', {path: '/contacts'});

和路线：

IB.ContactsRoute = Em.Route.extend({
    renderTemplate: function() {
          this._super();
          this.render('contacts', {into: 'application', outlet: 'secondCol'});
    }
});