Ember does not render after transition

Question

I have just written extremly simple Ember app, built on top of the Rails app, working with Ember Data and displaying, creating and persisting just one entity type to the server. Everything with the latest tools (Ember v1.0.0-pre.4-134-gaafb5eb).

However, there is very strange problem I have encountered. My app has two views: entity list (index) and form for creating new entities. When I enter the index directly, everything displays OK. But when I go to the other view and then back to the list, the view is not rendered again. Where could be the problem?

I guess it might be caused by my (maybe incorrect) using new Ember router. So I'm pasting important (from my point of view) parts of the app here:

Router:

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

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('bands');
  }
});

App.BandsRoute = Ember.Route.extend({
    model: function() {
        return App.Band.find();
    }
});

App.BandsNewRoute = Ember.Route.extend({
    renderTemplate : function(){
        this.render('bands_new',{
            into:'application'
        });
    }
});

Link back to list - which does not work:

App.BandsNewController = Em.ArrayController.extend({
    cancel: function() {
        this.transitionTo('bands');
    }
});

Have a look at the whole app here: https://github.com/pavelsmolka/roommating
(It's hugely inspired by great https://github.com/dgeb/ember_data_example)

I don't believe it, but could it be bug in Ember itself?

Answer 1

I think your "render" call in your BandsNewRoute is messing things up.Try making things go more with Ember defaults. So I would refactor your app to do this:

(working fiddle: http://jsfiddle.net/andremalan/DVbUY/)

Instead of making your own render, all you need to do is create a "bands" template (it can be completely empty except for {{outlet}} if you want) and a "bands.index" template.

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>


<script type="text/x-handlebars" data-template-name="bands/index">
    <h2>Bands Index</h2>
    {{#linkTo bands.new}}New Band{{/linkTo}}
</script>

<script type="text/x-handlebars" data-template-name="bands">
    <h1>Bands</h1>
    <p>
      {{#linkTo index}}Start Again{{/linkTo}}
      {{#linkTo bands.new}}New Band{{/linkTo}}
    </p>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="bands/new">
    I'm in new band!
    <a {{action "cancel"}}>Cancel</a>
</script>

Your routes also clean up really nicely this way:

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

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('bands');
  }
});


App.BandsNewController = Ember.Controller.extend({
    cancel: function() {
        this.transitionTo('bands');
    }
});

I hope that helps!