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 - 從路由動態呈現模板並追加

回答

相關問題