0

我正在关注 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（相同步骤）是否多余？如果没有，它添加了什么？

4

3 回答 3

1

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

然而，

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

 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”属性的“已检查”属性并设置“切换”类

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

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

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

model.save();

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

于 2013-10-29T02:51:42.567 回答
1

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

model.save();

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

于 2013-10-28T23:27:14.527 回答
0

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

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

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

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

于 2015-04-08T21:10:45.323 回答