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

Question

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

但是我在堆栈路由器中添加了 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/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>

和todo/index模板：

<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 都会呈现在其中。

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

Rendering model via nested templates in Ember

ember.js

ember-data