How to pass model in Nested routes - emberjs

Question

I have some nested routes.

App.Router.map(function() {
  this.route("dashboard", { path: "/dashboard" });
  this.resource("customers", { path: "/customers" },function(){
    this.resource("customer",{ path: "/:customer_id" },function(){
      this.resource("customer.contact",{path:'/contact'});
    });   
  });   
});

TEMPLATES

customers/index

  <script type="text/x-handlebars" data-template-name="customers/index">
    <h3>Customers</h3>
    <table>
    {{#each item in model}}
      <tr>
        <td>{{item.name}}</td>
        {{#link-to "customer" item tagName="td"}}Info{{/link-to}}
      </tr>
    {{/each}}
    </table>
  </script>

customer

  <script type="text/x-handlebars" data-template-name="customer">
    <h3>Customer {{name}}</h3>
    {{#link-to}}Gallery{{/link-to}}
    {{#link-to "customer.contact" this}}Contact{{/link-to}}
    {{outlet}}
  </script>

contact

  <script type="text/x-handlebars" data-template-name="customer/contact">
    <h3>Contact info of customer {{name}}</h3>
    {{contact}}   
  </script>

Go Customers->Info Everything works fine, the link from "customers/index" template passes the item to the customer template where {{name}} will be used. but if i want to pass the context to "contact" template, it doesnt work.

here is the JsBin http://emberjs.jsbin.com/EveQOke/107

Kingpin2k Kingpin2k · Accepted Answer · 2014-05-28T14:17:35

You need to specify a route for customer contact (as well for customer). The reason it works initially is because the link-to is passing the model to the route, so it can skip the non-existent model hook. But when you refresh the page, or hit the contact route, which has no dynamic segment, you need to tell ember that you want to use a model. There is a beta feature that allows all the routes under a resource to use the resource if they don't have another resource defined, but that's still a feature, and isn't yet gold.

App.CustomerRoute = Ember.Route.extend({
  model: function(param){
    return this.store.find('customer', param.customer_id);
  }
});

App.CustomerContactRoute = Ember.Route.extend({
  model: function(){
    return this.modelFor('customer');
  }
});

http://jsbin.com/EveQOke/110/edit

How to pass model in Nested routes - emberjs

1 Answers