Ember JS - 从路由动态呈现模板并追加

我有一个包含2个部分的web应用程序（使用ember 2.0）。左侧菜单和右侧内容相互独立。导航到路由名称“PageRoute”，应用程序从服务器加载配置JSON，处理它和检查，应该在哪里呈现，内容：Ember JS - 从路由动态呈现模板并追加

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

或

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

然后我使用“这一点。 transitionTo“并将其重定向到RightRoute或LeftRoute。 012RRightRoute是好的，LeftRoute是问题。

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

我发现一些一些解决方案追加视图，但视图在Ember 2.0中已弃用，我试过像这样做http://emberjs.jsbin.com/defapo/3/edit?html,js,output但路由器无法访问组件中的动作（使用pushObject），而我试着喜欢使用的数据存储或动态地修改模型无数其他方法等

来源

2015-09-23 user2783491

我会做这种方式：

/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()。

希望这会有所帮助。

来源

2015-09-24 09:12:47

它的工作原理！但是RightRoute存在问题。它不仅是附加菜单，而且还擦除（重新渲染）右侧的内容。在RightRoute中，我正在渲染_ {{outlet“maincontent”}} _ – user2783491

我并未完全明白RightRoute的问题。你能否广泛描述它？ –

左边是菜单，右边是内容，两者都是独立的。当它转换到LeftRouter时，它假定只附加新菜单，并且不对渲染的右部分和内容做任何事情。当它转换到RightRoute时，左边的部分（菜单）应该保持原样，所有的都在渲染菜单之前，右边的部分应该渲染新的内容。希望这是可以理解的。 – user2783491

Ember JS - 从路由动态呈现模板并追加

回答

相关问题