emberjs transitionTo not rendering model list

Question

UPDATE: Ok. I solved this.. I think it was because I was rendering the new client template into the application template in ClientsNewRoute(see below). My understanding(assumption) is that it was not operating within the context of the client model because it was initially rendering the new form into the application template then treating that as the parent while attempting to "transitionTo" the clients list view.

I have an /clients view that lists all of the clients when doing a complete refresh but after adding a new client from a form and using transitionTo it will not render the list. The logs show that the transitionTo is successful but I can't get the list to populate unless I am doing a complete refresh of the clients/ route. The backend is returning 200 with a complete model object. It may be because the model hook is not being called when transitioning from a subroute. Any ideas?

router.js

App.Router.map(function() {
  this.resource('clients', function(){
    this.route('new');
  });
  this.resource('client', { path: '/clients/:client_id' }, function(){
    this.route('edit');
  });

  this.resource('managers', function(){
    this.route('new');
  });
  this.resource('manager', { path: '/managers/:manager_id' }, function(){
    this.route('edit');
  });
  this.resource('projects', function(){
    this.route('new');
  });
  this.resource('project', { path: '/projects/:project_id' }, function(){
    this.route('edit');
  });
});

clients.route:

App.ClientsRoute = Ember.Route.extend({

  model: function(){
    return this.store.find('client');
  }

});

clients/new_route.js:

App.ClientsNewRoute = Ember.Route.extend({

renderTemplate: function() {
    this.render("clients/new", { 
        into: "application",
        outlet: "main"
})},

model: function(){
    return this.store.createRecord('client');
},
actions: {
    create: function(client){
        var route = this;
        client.save().then(function() {
            route.transitionTo('clients');
        }, function() {
            console.log('fail');
        });
    } 
  } 
});

Thanks

EDIT:

client/new.handlebars:

<form {{action 'create' this on="submit"}} >

{{#if isSaving }}
saving record...
{{/if}}


<div class="row">

<div class="col-md-2"></div>
    <div class="col-md-8">
        <h2>New Client</h2>

        <table class="table table-striped">
            <tr> <td> Company Name </td> <td>{{input class="form-control" type="text" value=company_name}} </td> </tr>
            <tr> <td> First Name </td> <td> {{input class="form-control" type="text" value=first_name}} </td> </tr>
            <tr> <td> Last Name </td> <td> {{input class="form-control" type="text" value=last_name}} </td> </tr>
            <tr> <td> Email </td> <td> {{input class="form-control" type="text" value=email}} </td> </tr>
            <tr> <td> Phone </td> <td> {{input class="form-control" type="text" value=phone}} </td> </tr>
            <tr> <td> Description </td> <td> {{textarea class="form-control" value=description}} </td> </tr>
            <tr> <td> Address </td> <td> {{input class="form-control" type="text" value=street_address}} </td> </tr>
            <tr> <td> City </td> <td> {{input class="form-control" type="text" value=city}} </td> </tr>
            <tr> <td> State </td> <td> {{input class="form-control" type="text" value=state}} </td> </tr>
            <tr> <td> Zipcode </td> <td> {{input class="form-control" type="text" value=zip}} </td> </tr>

        </table>
        <button>Create</button>

    </form>
    </div>
  <div class="col-md-2"></div>
</div>

clients.handlebars:

<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
    <h2>Clients</h2>

    <table class="table table-striped">
        <tr>
            <th>Company</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
        {{#each}}
        <tr>
            <td>{{#link-to 'client' this}} {{company_name}}     {{/link-to}}</td>
            <td>    {{ first_name}} {{last_name}} </td>
            <td>  {{ email }} </td>
            <td>  {{phone}} </td>
        </tr>
        {{/each}}

    </table>

    <p> {{#link-to 'clients.new'}}Create a new Client{{/link-to}}</p>
</div> 
<div class="col-md-2">o</div>

Log info:

Transitioned into 'clients.new' ember.js?body=1:3499
Transition #1: TRANSITION COMPLETE. ember.js?body=1:3499
Attempting transition to clients ember.js?body=1:3499
Transition #2: clients.index: calling beforeModel hook ember.js?body=1:3499
Transition #2: clients.index: calling deserialize hook ember.js?body=1:3499
Transition #2: clients.index: calling afterModel hook ember.js?body=1:3499
Transition #2: Resolved all models on destination route; finalizing transition. ember.js?body=1:3499
Could not find "clients.index" template or view. Nothing will be rendered Object {fullName: "template:clients.index"} ember.js?body=1:3499
Transitioned into 'clients.index' ember.js?body=1:3499
Transition #2: TRANSITION COMPLETE

The template that is rendered when I request the route directly is clients.handlebars and sits in the root of the templates/ directory. It doesn't have an outlet, it contains the #each loop that displays the table of clients.

Can you post the handlebars? Controller if anything important? — claptimes
You need to provide the information for the ClientsRoute, since that is the area with the problem. Also, are these defined as routes or resources on the map? — Jake Haller-Roby
Added routes for clients and clients/new as well as handlebars templates. The only outlet here is in my application.handlebars file. — errata

Jake Haller-Roby Jake Haller-Roby · Accepted Answer · 2014-02-20T21:01:21

I'm assuming you have your map structured something like:

App.Router.map(function(){
    this.resource('clients', function(){
        this.route('new');
    });
});

And your issue is that when transitioning from clients/new to clients, the model isn't being reloaded. Is this correct?

If so, try creating another Route:

App.ClientsIndexRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('client');
    }
});

emberjs transitionTo not rendering model list

2 Answers