Rendering model via nested templates in Ember

Question

I'm building an app with multiple todo lists. The todo list used to correctly show todo model.

But I added function() to stack router to wrap todos router (so that it would correctly render todos template in stack template).

Then todos/index template (which is rendered through the outlet in todos) stopped displaying todo model.

This is my router structure:

Todos.Router.map(function() {
  this.resource('stacks', {path: '/stacks'});
  this.resource('stack', {path: '/stacks/:stack_id'}, function () {

    this.resource('todos', { path: '/todos/:todos_id' }, function () {
        // additional child routes will go here later
        this.route('active');
        this.route('completed');
        this.route('new');

    });
    this.resource('todo', { path: 'todo/:todo_id' });

  });
});

Stack template which renders Todo template:

 <script type="text/x-handlebars" data-template-name="stack">
        <h1>
          <label {{action "editStack" on="doubleClick"}}>{{stackTitle}}</label>

          {{input 
            value=stackTitle
            action="createStack"}}

        <div>{{model.stackTitle}}</div>

            </h1>

        {{render 'todos' todo}}

    </div>
  </script>

Then this todo template has an outlet for todo/index:

  <script type="text/x-handlebars" data-template-name="todos">
  <div class="container-fluid">

    <section id="main">
      {{outlet 'todos/index'}}
      {{outlet modal}}
      {{input type="checkbox" id="toggle-all" checked=allAreDone}}
    </section>

  </div>

  </script>

And todo/index template:

<script type="text/x-handlebars" data-template-name="todos/index">
    <ul id="todo-list">
    <li {{bind-attr class="todo.isCompleted:completed todo.isEditing:editing"}}>
      {{#each todo in model itemController="todo"}}

          {{#if todo.isEditing}}
              {{edit-todo class="edit" value=todo.title focus-out="acceptChanges"
                       insert-newline="acceptChanges"}}

          {{else}}                
            {{input type="checkbox" checked=todo.isCompleted class="toggle"}}
            {{outlet}}
            <button {{action 'openModal' 'modal' model}}>
            <label {{action "editTodo" on="doubleClick"}}>{{todo.title}}</label>
            </button>

          {{/if}}
        </li>
      {{/each}}
    </ul>

  </script>

Routers:

Todos.TodosRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('todo');
  },

});

Todos.TodosIndexRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor('todos');
  },
});

I've tried using {{partial}} helper in case that was a problem, but it didn't seem to change much.

Maybe I'm missing something in todos/index router that I need to call data through nested templates?

I appreciate your help!

HeroicEric HeroicEric · Accepted Answer · 2015-04-12T20:35:17

There's a lot going on here but I think the root of your problem is with the way that you're using render in your templates/stack.

Since your routes/todos route is nested inside your routes/stack route, you're going to want to use an outlet inside your templates/stack if you want any of the templates for the nested routes to be rendered.

When you use render 'todos' todo, you're saying to render templates/todos with the todo property from the controllers/stack as the model. This isn't going to use your routes/todos or routes/todos-index to set the model.

What you probably want is for your templates/stack to have an {{outlet}} that either the routes/todos or routes/todo is rendered into when you visit either of those routes.

Rendering model via nested templates in Ember

1 Answers