javascript - 将 itemController 与每个助手一起使用的 ember.js 无法按预期工作

Question

我应该如何更改以下代码才能按预期工作，这样即使我完成了一个，也不会更改其他待办事项的完成度？

itemController="todo"声称将每个项目包装在自己的 Controller 中，但没有这样做。

index.html

    <script type="text/x-handlebars" id="todos">
    <ul>
        {{#each controller itemController="todo"}}
        <li>{{#link-to 'todo' this}}{{job}} -- {{#if isCompleted}}Completed{{else}}Incomplete{{/if}}{{/link-to}}</li>
        {{/each}}
    </ul>
    {{outlet}}
</script>
<script type="text/x-handlebars" id="todo">
    <p>Job: {{job}} -- {{#if isCompleted}}Completed{{else}}Incomplete{{/if}}</p>
    <button {{action 'complete' controller}}>Complete</button>
</script>

app.js

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('todos', function() {
    this.resource('todo', { path: ':todo_id' })
  });
});

App.IndexRoute = Ember.Route.extend({
    redirect: function() { this.transitionTo('todos'); }
});

App.TodosRoute = Ember.Route.extend({
    model: function() {
        return todos;
    }
});

App.TodoRoute = Ember.Route.extend({
    model: function(params) {
        return todos.findBy('id', params.todos_id);
    }
});

App.TodosController = Ember.ArrayController.extend({
});

App.TodoController = Ember.ObjectController.extend({
    isCompleted: false,
    actions: {
        complete: function() {
            this.set('isCompleted',true);
        }
    }
});

var todos = [{id: '1', job: 'running'}, {id: '2', job: 'swimming'}, {id: '3', job: 'study'}];

Answer 1

我相信你在混合东西

1 你在 App.TodosRoute 中有一个待办事项列表，每个都由自己的 Controller 支持，但在 App.TodoRoute 中你有另一个 todoController 实例，因为该属性在 Controller 级别，你正在查看设置的属性对于 Controller 的第 4 个实例，负责单例的 todoRoute。

您可以将属性移至模型，一切都会顺利进行。

App.TodoController = Ember.ObjectController.extend({

    actions: {
        complete: function() {
            this.set('isCompleted',true);
        }
    }
});

var todos = [{id: '1', job: 'running',isCompleted: false}, {id: '2', job: 'swimming',isCompleted: false}, {id: '3', job: 'study',isCompleted: false}];