创建新的模型实例 编辑页面

英文原文：http://emberjs.com/guides/getting-started/creating-a-new-model/

接下来，我们将更新我们的静态HTML<input>为一个Ember视图，以便能够提供更多复杂一些的行为。我们将index.html中的新建待办事项的<input>替换为一个{{input}}助手：

1
2
3
4
5
6
7
8
9

{{! ... 为保持代码简洁，在此省略了其他代码 ... }}
<h1>todos</h1>
{{input
  type="text"
  id="new-todo"
  placeholder="What needs to be done?"
  value=newTitle
  action="createTodo"}}
{{! ... 为保持代码简洁，在此省略了其他代码 ... }}

上述模板将在这渲染一个具有相同id和placeholder属性的<input>元素。并且将这个模板对应的控制器的newTitle属性与<input>的value属性相连。当一个发生改变时，另外一个将自动保持同步。

另外，我们还将使用模板控制器的createTodo方法来处理用户交互（按下<enter>键）。

因此目前我们并不需要自定义控制器行为，Ember.js为模板提供了一个缺省的控制器。为了处理新的行为，我们可以实现一个Ember可以根据命名惯例找到，并能添加自定义行为的控制器。这个新控制器类将自动的关联到该模板。

添加一个js/controllers/todos_controller.js文件。你可以将该文件放置到任意你喜欢的地方（即使将所有代码放置在同一个文件中），不过本指南将假设你按照指定的方式创建和命名该文件。

在js/controllers/todos_controller.js中实现了Ember.js根据命名惯例可以找到的控制器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Todos.TodosController = Ember.ArrayController.extend({
  actions: {
    createTodo: function() {
      // Get the todo title set by the "New Todo" text field
      var title = this.get('newTitle');
      if (!title.trim()) { return; }

      // Create the new Todo model
      var todo = this.store.createRecord('todo', {
        title: title,
        isCompleted: false
      });

      // Clear the "New Todo" text field
      this.set('newTitle', '');

      // Save the new model
      todo.save();
    }
  }
});

上述控制器现在负责使用newTitle属性作为一个isCompleted属性为假的新待办事项的标题的用户操作。接着将清除这个将用于同步模板和重置文本框的newTitle属性。最后将待办事项所有未保存的修改持久化。

在index.html中包含js/controllers/todos_controller.js依赖：

1
2
3
4
5

<!--- ... 为保持代码简洁，在此省略了其他代码 ... -->
   <script src="js/models/todo.js"></script>
   <script src="js/controllers/todos_controller.js"></script>
 </body>
<!--- ... 为保持代码简洁，在此省略了其他代码 ... -->

重新载入Web浏览器以确保所有被引用的文件正确无误且没有任何错误发生。现在可以通过在<input>中输入一个标题，然后点击<enter>键来添加其他的待办事项。

在线示例

Ember.js • TodoMVC

附加资源