Question

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

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

然后todos / index模板（通过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>

然后这个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>

和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

这里有很多内容，但我认为问题的根源在于您render中使用templates/stack的方式。

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

当您使用render 'todos' todo时，您说要使用templates/todos中的todo属性作为模型呈现controllers/stack。这不会使用您的routes/todos或routes/todos-index来设置model。

您可能想要的是templates/stack有一个{{outlet}}，当您访问其中任何一条路线时，routes/todos或routes/todo都会被渲染。

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

1 个答案: