ember.js - Best way to switch controller and view of a route based on a property of model -

ember.js - Best way to switch controller and view of a route based on a property of model -

i need alter view , controller of route based on property of model. illustration lets assume have route hierarchy defined as:

ember.router.map(function () { this.resource("games", function () { this.resource('game', {path: ':game_id'}, function () { this.route('basics'); this.route('advanced'); }); }); });

and game model looks this:

app.game = ds.model.extend({ name: ds.attr('string'), category: ds.attr('string) });

so if name of game football, , wanted go basics route of game want utilize footballbasicscontroller , utilize football-basics-view. way doing using rendertemplate hook in gamebasicsroute this:

as.gamebasicsroute = em.route.extend({ ...... rendertemplate: function (controller, model) { var gamename = model.get("name"), template = gamename + "-basics", gamebasedcontroller = controller; //if cannot resolve template utilize default template template = (this.container.resolve('template:' + template)) ? template : 'game.basics'; /** * first check if have controller defined, if utilize controller instance live * or else create new 1 * */ if (this.container.lookupfactory('controller:' + gamename + "-basics")) { gamebasedcontroller = this.controllerfor(gamename + '-basics'); gamebasedcontroller.set("model", model); controller.set('gamebasedcontroller', typebasedcontroller);//might want sth later } this.render(template, { 'controller': gamebasedcontroller }); }, });

this works well, having bit of issue in case want leverage didinsertelement hooks of view. controllers not destroyed(although might design) - reason believe because state of properties retained when switch 1 route another.

i have had 1 gamebasicsview switches templates based on model property not sure how set context controller view other default gamebasicscontroller.

your feedback much appreciated. thanks.

are game types drastically different need own controllers , views? break things downwards @ template level , not @ controller level. have partial template wrapped in own view each game type, , can share same controller...

that said, utilize render helper, generate controller each partial template include. need pass in model context, simple enough.

http://emberjs.com/guides/templates/rendering-with-helpers/#toc_the-code-render-code-helper

so in case, number of things:

{{#if isfootball}} {{render "football" this}} {{/if}} {{#if issoccer}} {{render "soccer" this}} {{/if}}

isfootball computed property checks game type , returns boolean. generate app.footballview , app.footballcontroller specify behavior within contexts.

or, improve in template bind game type (category?) or compute formatted string property:

{{render getgametemplate this}}

and games controller:

getgametemplate: function () { homecoming this.get('category') + "_formatted"; //you format template name string if needed }.property('category')

hope helps!

ember.js