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

Question

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

但我在堆栈路由器中添加了 function() 以包装 todos 路由器（以便它可以正确地在堆栈模板中呈现 todos 模板）。

然后 todos/index 模板（通过 todos 中的 outlet 渲染）停止显示 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>

那么这个 todo 模板有一个 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>

还有待办事项/索引模板：

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

我已经尝试使用 {{partial}} 帮助程序以防出现问题，但它似乎没有太大变化。

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

感谢您的帮助！

Answer 1

这里发生了很多事情，但我认为问题的根源在于您在 templates/stack 中使用 render 的方式。

由于您的 routes/todos 路由嵌套在您的 routes/stack 路由中，如果您想要渲染嵌套路由的任何模板，您将需要在您的 templates/stack 中使用 outlet。

当您使用render 'todos' todo 时，您的意思是使用controllers/stack 中的todo 属性作为模型来渲染templates/todos。这不会使用您的routes/todos 或routes/todos-index 来设置model。

您可能希望您的templates/stack 有一个{{outlet}}，当您访问其中任何一条路线时，routes/todos 或routes/todo 会呈现为。