CODEWITHSUNDEEP
javascriptjqueryjsonember.jsdynamic
user2783491
user2783491

Reputation: 3

Ember JS - Dynamically render template from route and append

I have a web application (using ember 2.0) with 2 parts. Left menu and right content, both independent from each other. Navigating to route name "PageRoute", application load the configuration JSON from server, process it and the checks, where should be content rendered:

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

or

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

Then I use "this.transitionTo" and redirect it to RightRoute or LeftRoute. RightRoute is ok, LeftRoute is the problem.

At the beginning - Left menu is empty. When LeftRoute is loaded, it should append (not replace) some menu (rendered template or component). When the LeftRoute is loaded again, new menu should be rendered from model and append it to existing left menus so it would be possible to swap between rendered menus and the last menu will be visible. At the same time, when the current menu is swapped, it should be removed from the "left menu list" and the previous menu will be visible.

I've found some some solutions appending View, but the view is deprecated in Ember 2.0, I've tried to do it like here http://emberjs.jsbin.com/defapo/3/edit?html,js,output but Router can't access actions in components (with pushObject) and I've tried countless other methods like using data stores or dynamically modifying the model etc.

Upvotes: 0

Views: 335

Answers (1)

Artur Smirnov
Artur Smirnov

Reputation: 804

I would make it this way:

/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}}

In this case when you transitionTo('left', menuData) it will append the menu to the list. When you need to remove last menu, you can do this.controllerFor('left').removeMenu() in any other route (e.g. in your PageRoute).

Hope this helps.

Upvotes: 0

Related Questions