ember.js使用项目控制器与每个帮助程序不能按预期工作

时间:2013-10-14 15:06:40

标签: javascript ember.js handlebars.js

如何更改以下代码以按预期工作,如果我完成了其他待办事项,则不会更改其他待办事项的完成情况吗?

itemController =“todo”声称将每个项目包装在自己的控制器中但未能这样做。

的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'}];

1 个答案:

答案 0 :(得分:0)

我相信你在混合东西

1你有一个todos列表,每个todos都由app.TodosRoute中的ist自己的控制器支持,但在App.TodoRoute中你有另一个todoController实例,因为属性在控制器级别,你正在查看属性设置对于控制器的第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}];