The Ember.js Todos Demo Application: app.js Part 2

The previous post walked through most of app.js.  In this post we look at the remaining pieces of this core code.

Extend Ember.TextField Control
Ember provides hooks into common html controls, including buttons, check boxes, text fields,  select lists, and text areas.  The Todos app has one text field.  This control binds to the insertNewLine function.  insertNewLine is called when [Enter] is pressed within a text field.  When the user presses Enter, this function takes the value in the TextField, creates a Todo with it, and blanks out the TextField.

Todos.CreateTodoView = Ember.TextField.extend({
  insertNewline: function() {
    var value = this.get('value');

    if (value) {
      this.set('value', '');

Render a Handlebars template and insert it into the DOM
Ember uses the Handlebars templating library.  A View’s templateName property tells Ember which template to use.  The following code tells Ember to use the DOM element with data-template-name=”main_view” as its template.

Todos.MainView = Ember.View.extend({
  templateName: 'main_view'


That’s a wrap for app.js.  We told Ember there is a TextField and extended Ember.TextField in order to capture the insertNewLine event.  Finally, we told Ember to use the ‘main_view’ template.  In the next post we will look at the main_view.handlebars template itself to see how this all ties together.

One thought on “The Ember.js Todos Demo Application: app.js Part 2

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s