Ember.js 通过Ember中的嵌套模板渲染模型

我正在构建一个包含多个待办事项列表的应用程序。用于正确显示todo模型的todo列表

但我在堆栈路由器中添加了函数（）来包装todos路由器（这样它就可以在堆栈模板中正确地呈现todos模板）

然后todos/索引模板（通过todos中的出口呈现）停止显示todo模型

这是我的路由器结构：

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' });

  });
});

呈现Todo模板的堆栈模板：

 <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>

<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>

我曾经尝试过使用{{partial}}helper，以防出现问题，但似乎没有多大变化

也许我在todos/索引路由器中遗漏了一些我需要通过嵌套模板调用数据的东西

---

我感谢你的帮助

这里发生了很多事情，但我认为问题的根源在于在

模板/堆栈中使用
渲染
的方式

由于
routes/todo
路由嵌套在
routes/stack
路由中，因此如果要呈现嵌套路由的任何模板，您需要在
templates/stack
中使用
outlet

使用
render'todo'todo
时，您说的是使用
controllers/stack
中的
todo
属性作为模型来呈现
templates/todo
。这不会使用您的
routes/todo
或
routes/todo索引来设置
模型

您可能希望您的
模板/堆栈
具有一个
{{outlet}}
，当您访问其中一个路由时，
路由/todo
或
路由/todo
将被呈现到其中。
谢谢！这消除了我对outlets和render的混淆。虽然现在我已连接输出错误ha
<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>

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

});

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