Amber doesn't after transition
I just wrote an extremely simple Ember application built on top of a Rails application, working with Ember Data and displaying, creating and saving only one entity type on the server. All with the latest tools (Ember v1.0.0-pre.4-134-gaafb5eb).
However, there is a very strange problem that I am facing. My application has two kinds: a list of entities (index) and a form for creating new objects. When I enter the index directly, everything is displayed OK. But when I go to another view and then back to the list, the view is not shown again. Where could the problem be?
I'm guessing it might be caused by my (possibly wrong) use of the new Ember router. So I am inserting the important (from my point of view) parts of the application 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 to list - which doesn't work:
App.BandsNewController = Em.ArrayController.extend({
cancel: function() {
this.transitionTo('bands');
}
});
Have a look at the whole app here: https://github.com/pavelsmolka/roommating
(He's very much inspired by the big https://github.com/dgeb/ember_data_example )
I don't believe this, but could this be a bug in Ember?
source to share
I think your call to "render" in your BandsNewRoute is confusing. Try doing things differently with your Ember settings. So I would refactor your application to do this:
(working fiddle: http://jsfiddle.net/andremalan/DVbUY/ )
Instead of creating your own renderings, you need to create a "band" template (it can be completely empty except for {{outlet}} if you want) and a "band.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 this helps!
source to share