Ember - retrieve selected menu item and load a template accordingly

Question

I have designed a page (home page) using ember and running over nodeJS. On the left side of this home page, I have a vertical menu. All the menu items (values) are loaded dynamically using a webservice.

            {{#each}}
                {{#linkTo 'category' this}}
                    <ul id="{{unbound id}}" class="menu" onclick="popMenu('{{unbound title}}', '{{unbound id}}')">
                        <div id="{{unbound title}}">{{unbound title}}</div>
                    </ul>
                {{/linkTo}}
            {{/each}}

When user clicks on any of these menu items, a 'category' template will be called.

App.Router.map(function() {
    this.route("category", {path: ':title'});
});

App.CategoryRoute = Ember.Route.extend({
    model: function() {
       console.log('test');
    }
});

I tested the above code in my local environment (localhost:3000). When user clicks any menu item, 'category' template is loaded successfully with a url change (localhost:3000/#/SELECTED_TITLE_VALUE).

However, my 'test' logs are not printed in console (which I have in my CategoryRoute. it makes that my route function is not called).

Can anyone please guide me on the following questions: - When user clicks any menu item, the new templates are rendered properly (with a proper url changes). However, my 'CategoryRoute' is not properly called?

My main goal is to:

• When user clicks this left menu, I have to retrieve the selected_menu_item_id and call a new webservice based on the selected_menu_item_id.
• I have to use this webservice response, and load few information in the newly rendered template.

Can someone please guide the controllers and model for my above scenario. Some code snippets will be very helpful.

Thank You.

Answer 1

Based on the latest answers/modifications/clarifications of the question, here is another example, http://emberjs.jsbin.com/UQIbEjU/1/edit

The main part is

var selectedCategoryPath = null;
var categoryInformation = null;
App.CategoryRoute = Ember.Route.extend({
    beforeModel: function(transition) {
       selectedCategoryPath = transition.providedModels.category.id; //retrieves the value of selected menu id
       var category = Categories.create();
       categoryInformation= category.getCategoryInformation(); //When user clicks any menu item, a new template should be loaded with an webservice response. currently I have replaced my webservice code with an model data
       console.log(categoryInformation);
      this.set("categoryInfo",categoryInformation);
       return categoryInformation;
    },
    setupController: function(controller, model){
        controller.set('categoryInfo', this.get("categoryInfo"));
    }
});

App.CategoryController = Ember.Controller.extend({
  categoryInfo:null
});

So this works because a controller with a property categoryInfo has been created and the data (category.getCategoryInformation();) from beforeModel is set to that property. This is required because the template was

{{categoryInfo.description}}

Also in this case the model (within the setupController) is the one assigned by the link-to which is {id: 1, title: "item 1"}, {id: 2, title: "item 2"} and so on. No categoryInfoproperty was present, so the categoryInfo property of the controller had to be set.

In the latest resolution, you call

setupController: function(controller, model){
        this._super(controller, categoryInformation);
    }

the categoryInformation data is assigned as model to the default controller and by modifying the template as you nicely did, the {{description}} now exists as the model/categoryInformation includes this information.

Answer 2

model hook of the route is only fired when the transition is from url, otherwise, linkto helper and transisionTo method don't fire this hook because normally you provide the model i.e.

{{#link-to 'category' this}}

The this keyword represents the model for the route...

http://emberjs.com/guides/routing/specifying-a-routes-model/

Good luck