Ember JS - 从路由动态渲染模板并追加

Question

我有一个包含 2 个部分的 Web 应用程序（使用 ember 2.0）。左侧菜单和右侧内容，相互独立。 导航到路由名称“PageRoute”，应用程序从服务器加载配置 JSON，对其进行处理和检查，内容应该呈现在哪里：

{
...
position: "left",
...
}

或

{
...
position: "right",
...
}

然后我使用“this.transitionTo”并将其重定向到 RightRoute 或 LeftRoute。 RightRoute 没问题，LeftRoute 是问题。

一开始 - 左侧菜单为空。当 LeftRoute 被加载时，它应该附加（而不是替换）一些菜单（渲染的模板或组件）。 再次加载 LeftRoute 时，应从模型渲染新菜单并将其附加到现有的左侧菜单，以便可以在渲染的菜单之间进行交换，并且最后一个菜单将可见。 同时，当前菜单切换时，应从“左侧菜单列表”中移除，上一个菜单可见。

我找到了一些附加 View 的解决方案，但在 Ember 2.0 中不推荐使用该视图，我尝试像这里 http://emberjs.jsbin.com/defapo/3/edit?html,js,output 那样做，但路由器无法访问组件中的操作（使用 pushObject），我'已经尝试了无数其他方法，例如使用数据存储或动态修改模型等。

Answer 1

我会这样：

/controllers/left.js

import Ember from 'ember';
export default Ember.Controller.extend({

    menus: [],

    addMenu (menuData) {
        this.get('menus').addObject(menuData);
    },

    removeMenu () {
        this.get('menus').popObject();
    }

});

/routes/left.js

import Ember from 'ember';
export default Ember.Route.extend({

    setupController (controller, model) {
        controller.addMenu(model);
    }

});

/templates/left.hbs

{{#each menus as |menu| }}
    <!-- render menu -->
    {{log menu}}
{{/each}}

在这种情况下，当您transitionTo('left', menuData) 时，它会将菜单附加到列表中。当您需要删除最后一个菜单时，您可以在任何其他路径（例如在您的 PageRoute）中执行 this.controllerFor('left').removeMenu()。

希望这会有所帮助。