Question

我正在关注余烬的入门指南，并对“入门指南”的这一步提出疑问：http://emberjs.com/guides/getting-started/marking-a-model-as-complete-incomplete/

简而言之，我们应该通过选中/取消选中复选框来切换模型的布尔属性。

以下是JSBin中的代码：http://jsbin.com/UDoPajA/1/edit

我实现了UI代码：

{{input type="checkbox" class="toggle" checked=isCompleted}}

看起来一切正常。 UI正确更新，Ember检查员告诉我正在模型上切换属性。

该指南还告诉我如下添加控制器：

Todos.TodoController = Ember.ObjectController.extend({
  isCompleted: function(key, value){
    var model = this.get('model');

    if (value === undefined) {
      // property being used as a getter
      return model.get('isCompleted');
    } else {
      // property being used as a setter
      model.set('isCompleted', value);
      model.save();
      return value;
    }
  }.property('model.isCompleted')
});

此时指南中定义的TodoController（同一步骤）是多余的吗？如果没有，它会添加什么？

Answer 1

控制器中的代码不是多余的。

model.save();

此行保存模型（如果您使用rest API，此行将生成AJAX请求，您的后端将保存DB中的更改）。

Answer 2

我认为可能导致您认为此代码可能多余的原因是认为此代码在此步骤中添加了“模型”。根据你的陈述：“指南还告诉我如下添加模型：”

然而，

用于表示模型的代码仍然相同：

 Todos.Todo = DS.Model.extend({
   title: DS.attr('string'),
   isCompleted: DS.attr('boolean')
 });

使用该模型的灯具数据仍然相同：

Todos.Todo.FIXTURES = [
  {
    id: 1,
    title: 'Learn Ember.js',
    isCompleted: true
  },
  {
    id: 2,
    title: '...',
    isCompleted: false
  },
  {
    id: 3,
    title: 'Profit!',
    isCompleted: false
  }
];

您在此步骤中所做的是添加一个Controller，更具体地说是一个ObjectController来控制待办事项的每个实例，然后将适当的数据代理到Model，此时相应的数据就是您的'isCompleted'值。但是你如何最终得到一个对象呢？让我们来看看。

Todos的模板控制器是:(检查拼写'Todos'）

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

您现在想要的是控制该数组中的每个（对象）待办事项（您问：'这是什么添加'）。因此，为了返回Object，您可以在把手模板itemController =“todo”中实现此代码，然后将每个项目包装在自己的ObjectController实例中，名为“todo”：

{{#each itemController="todo"}}

现在您正在为每个待办事项获取一个Object，您实现了ObjectController：

Todos.TodoController = Ember.ObjectController.extend({
  /* same code */
});

然后检查每个todo对象的'isCompleted'属性，然后在切换复选框时获取或设置属性的值。

{{input type="checkbox" checked=isCompleted class="toggle"}}

此代码在Ember中使用输入助手，呈现一个“复选框”，该复选框传递属性'checked'，该属性绑定到'isCompleted属性并设置类'切换'

因为它是模型上的布尔值，所以当切换时它将返回true或false。控制器通过设置计算属性来监视'isCompleted'值的更改：

...}.property('model.isCompleted')

然后将警告控制器并更新更改的模板。并保存模型。

model.save();

不确定是否会将其清除，但我希望如此。快乐编码!!

Answer 3

如果没有自定义控制器，默认控制器只需将isCompleted代理到模型，如果您不希望完成状态在某些其他答案中观察到，则可以正常工作。

model.save()仍然存在变化。当然，当使用灯具时，这并不能真正实现，因为刷新页面会将状态返回到原始灯具。如果数据来自REST API或类似数据，它实际上会更新，并会在页面刷新时反映出来。

另外值得一提的是，因为自定义控制器将函数声明为Computed Property，所以isCompleted函数被视为属性，这与默认控制器直接代理它时的属性完全相同到模型的isCompleted属性。

在Ember TodoMVC教程中，这一点可以更加清晰。

通过{{input checked = isCompleted}}更新模型属性

3 个答案: