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

【问题标题】：Update model property via {{input checked=isCompleted}}通过 {{input checked=isCompleted}} 更新模型属性
【发布时间】：2013-10-28 22:31:47
【问题描述】：

我正在关注 Embers 的入门指南，并对“入门指南”的这一步有疑问：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 是否多余？如果没有，它增加了什么？

【问题讨论】：

标签： ember.js

【解决方案1】：

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

model.save();

这一行保存模型（如果你使用rest API，这一行会产生AJAX请求，你的后端会将更改保存到DB中）。

【讨论】：

【解决方案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
  }
];

您在这一步所做的是添加一个控制器，更具体地说是一个 ObjectController 来控制待办事项的每个实例，然后将适当的数据代理到模型，此时适当的数据就是您的“isCompleted”值。但是你怎么会得到一个对象呢？一起来看看吧。

Todos 的模板控制器是：（检查拼写“Todos”）

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

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

{{#each itemController="todo"}}

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

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

它将检查每个待办事项对象的“isCompleted”属性，然后在切换复选框时获取或设置属性的值。

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

此代码使用 Ember 中的输入帮助器，它呈现一个“复选框”，该复选框传递绑定到“isCompleted”属性的“已检查”属性并设置“切换”类

由于它是模型上的布尔值，因此在切换时将返回真或假。控制器通过设置计算属性来监视“isCompleted”值的变化：

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

然后它将提醒控制器并更新更改的模板。并保存模型。

model.save();

不确定这是否能解决问题，但我希望如此。快乐编码！

【讨论】：

【解决方案3】：

如果没有自定义控制器，默认控制器只是将 isCompleted 代理到模型，如果您不希望完成状态像其他一些答案中所观察到的那样持续存在，这将正常工作。

model.save() 保持更改。当然，当使用固定装置时，这并不能真正实现很多，因为刷新页面会将状态返回到原始固定装置。如果数据来自 REST API 或类似的，它实际上会被更新，并且会在页面刷新时反映出来。

另外值得一提的是，因为自定义控制器将函数声明为 Computed Property，所以 isCompleted 函数被视为一个属性，这正是默认控制器将其直接代理到模型的 @ 时的属性。 987654325@财产。

这在 Ember TodoMVC 教程中真的可以说得更清楚。

【讨论】：