Emberjs rendering wrong template

Question

I am working with EmberJs and can't figure out why the following code won't render the 'new' template. When I navigate to /shops, I get a list of shops and a create button linking to '/shops/new', but when I click create, the 'new' template isn't rendered and instead stays the same as 'shops'. I can navigate to each individual shop fine, just not new.

App.js

window.App = Ember.Application.create();

App.Router.reopen({
  location: 'history'
});

// Router
App.Router.map(function() {
  this.resource('shops', function() {
    this.route('new');
  });
  this.resource('shop', { path: '/shops/:shop_id' });
});

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

App.ShopsNewRoute = App.ShopsRoute.extend({
  model: function() {
    return App.Shop.createRecord();
  },
  setupController: function( controller, model ) {
    return this._super(),
    controller.set( 'content', model )
  }
});

App.ShopsNewController = Ember.ObjectController.extend();

// Models
App.Store = DS.Store.extend({
  revision: 11,
  adapter: DS.RESTAdapter
});

App.Shop = DS.Model.extend({
  name: DS.attr('string'),
  body: DS.attr('string'),
});

Index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Ember/Rails App</title>
    <%= stylesheet_link_tag    "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
  </head>
  <body>

    <script type="text/x-handlebars" data-template-name="application">
      <div class="row">
        <div class="twelve columns">
          <h1>Ordr</h1>
          <hr>
          {{outlet}}
        </div>
      </div>
    </script> 

    <script type="text/x-handlebars" data-template-name="shops/new">
      <h2>New Shop</h2>
    </script>

    <script type="text/x-handlebars" data-template-name="shops">
      {{#each shop in controller}}
        {{#linkTo "shop" shop}} {{ shop.id }}{{/linkTo}}
      {{/each}}

      {{#linkTo 'shops.new'}}Create{{/linkTo}}
    </script>


    <script type="text/x-handlebars" data-template-name="shop">
      <h2>{{name}}</h2>
      <p>{{body}}</p>
    </script>


  </body>
</html>

Teddy Zeenny Teddy Zeenny · Accepted Answer · 2013-02-22T12:12:39

The way you have set up your routes and templates, you are telling Ember that you want to navigate to shops.new and keep all the list of shops showing even while you are in shops.new.

If that is in fact the scenario that you want, all you need to do is add an {{outlet}} inside the shops template:

<script type="text/x-handlebars" data-template-name="shops">
  {{#each shop in controller}}
    {{#linkTo "shop" shop}} {{ shop.id }}{{/linkTo}}
  {{/each}}

  {{#linkTo 'shops.new'}}Create{{/linkTo}}
  {{outlet}}
</script>

However, if that is not what you really intend, and you actually want the list of shops to be hidden when you transition to shops.new, then you will need to change a couple of things.

change your App.ShopsRoute to App.ShopsIndexRoute :

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

and your shops template to shops/index template:

<script type="text/x-handlebars" data-template-name="shops/index">
  {{#each shop in controller}}
    {{#linkTo "shop" shop}} {{ shop.id }}{{/linkTo}}
  {{/each}}

  {{#linkTo 'shops.new'}}Create{{/linkTo}}
</script>

Any of those 2 methods should fix your problem, depending on what your intentions are.

Emberjs rendering wrong template

1 Answers