Modeling Data Edit Page

Next we will create a model class to describe todo items.

Create a file at js/models/todo.js and put the following code inside:

1
2
3
4

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

This code creates a new class Todo and places it within your application's namespace. Each todo will have two attributes: title and isCompleted.

You may place this file anywhere you like (even just putting all code into the same file), but this guide will assume you have created a file and named it as indicated.

Finally, update your index.html to include a reference to this new file:

1
2
3
4

<!-- ... additional lines truncated for brevity ... -->
  <script src="js/models/todo.js"></script>
</body>
<!-- ... additional lines truncated for brevity ... -->

Reload your web browser to ensure that all files have been referenced correctly and no errors occur.

Live Preview

Ember.js • TodoMVC

Additional Resources