CODEWITHSUNDEEP
javascriptember.jshandlebars.js
Rodrigo
Rodrigo

Reputation: 4802

Why Ember don't renders the child resource?

This simple Ember application should list posts. But Ember doesn't renders the post template.

JS:

App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();

App.Router.map(function() {
  this.resource('posts', function(){
    this.resource('post', { path: '/:post_id'});
  });
});

App.Post = DS.Model.extend({
  title: DS.attr('string')
});
App.Post.FIXTURES = [
  { id: 1, title: "First post" },
  { id: 2, title: "Second post" },
  { id: 3, title: "Last post" },
];

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

HTML body tag:

<body>

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
  {{#link-to 'posts'}}
  posts
  {{/link-to}}
  </script>

  <script type="text/x-handlebars" data-template-name="posts">
    <h3>Posts list</h3>
    <ul>
      {{#each post in model}}
        <li>
           {{#link-to 'post' post}}
              {{post.title}}
           {{/link-to}}
        </li>
      {{/each}}
    </ul>
  </script>

  <script type="text/x-handlebars" data-template-name="post">
    Post #{{id}}: {{title}}
  </script>
</body>

JSBin of this example.

Note: If I remove the posts template and access /#/posts/1 URL, Ember renders the post template.

What's wrong with this code?

Upvotes: 1

Views: 32

Answers (1)

melc
melc

Reputation: 11671

If an {{outlet}} is added to posts template then the post template will be rendered.

example 1

http://jsbin.com/yepica/1

However if you do not want the template to be nested then rename posts to posts/index.

example 2

http://jsbin.com/wedufo/1

from documentation

http://emberjs.com/guides/routing/defining-your-routes/#toc_resources

helpful article

http://ugisozols.com/blog/2013/11/05/understanding-nesting-in-emberjs/

example 1 hbs

<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
  {{#link-to 'posts'}}
  posts
  {{/link-to}}
  </script>

  <script type="text/x-handlebars" data-template-name="posts">
    <h3>Posts list</h3>
    <ul>
      {{#each post in model}}
        <li>
           {{#link-to 'post' post}}
              {{post.title}}
           {{/link-to}}
        </li>
      {{/each}}
    </ul>
{{outlet}}

  </script>

  <script type="text/x-handlebars" data-template-name="post">
    Post #{{id}}: {{title}}
  </script>

example 2 hbs

<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
  {{#link-to 'posts'}}
  posts
  {{/link-to}}
  </script>

  <script type="text/x-handlebars" data-template-name="posts/index">
    <h3>Posts list</h3>
    <ul>
      {{#each post in model}}
        <li>
           {{#link-to 'post' post}}
              {{post.title}}
           {{/link-to}}
        </li>
      {{/each}}
    </ul>


  </script>

  <script type="text/x-handlebars" data-template-name="post">
    Post #{{id}}: {{title}}
  </script>

Upvotes: 2

Related Questions