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

Question

控制器，视图和其他ember构造的良好组合将下面的线框中的基本功能组合在一起？

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

我的假设是此屏幕位于ContactsRoute下方，ContactsController是包含ArrayController模型的Contact（所选状态仅为用户界面且未保留）

Answer 1

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

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

Left Col ：是一个带有关联控制器的TreeNavView。 如果输入＃/ contacts（和＃/ contacts /）

，则会选中它

右列：带有关联控制器的ContactsView。视图可能是由较小的视图原子组装而成，如输入控件等。

关于控制器的特别说明：根据我的经验，你或多或少强迫Ember在控制器和视图之间建立1：1的关系 - 所以共享控制器是一件坏事，很难管理。

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

如何将相应的视图呈现到出口？ 对于左侧col，我将直接从应用程序视图模板“调用”视图，如下所示：

{{view App.TreeNav}}

我会通过相应的路由器映射填写“正确的插座”：

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

和路线：

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