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

Question

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

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

或

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

然后我使用 "this.transitionTo" 并将其重定向到 RightRoute 或 LeftRoute。右路没问题，左路有问题

开头 - 左侧菜单是空的。加载 LeftRoute 时，它应该附加（而不是替换）一些菜单（呈现的模板或组件）。当再次加载 LeftRoute 时，应该从模型中渲染新菜单并将其附加到现有的左侧菜单，这样就可以在渲染的菜单之间切换，最后一个菜单将可见。同时，当当前菜单被交换时，应该将其从"left menu list"中移除，并且之前的菜单将可见。

我找到了一些附加视图的解决方案，但视图在 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) 时，它会将菜单附加到列表中。当您需要删除最后一个菜单时，您可以在任何其他路由中执行 this.controllerFor('left').removeMenu()（例如，在您的 PageRoute 中）。

希望这对您有所帮助。

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

Ember JS - Dynamically render template from route and append

javascript

jquery

json

dynamic

ember.js