Web-client development with Ember.js and Windows Azure Mobile Services - Part 2

  • Article

Today I continue building the application started in Part 1 by adding navigation and some basic routes and templates. If you're following along, you should be starting out with an application that looks something like the following when you start it using the 'grunt server' command:

Adding navigation

An easy way to add navigation to an application is to add a navigation bar. The following steps will add one that will contain a link that will display a list of all blog posts, and another link that displays a form for writing new posts.

  1. open the emberapp/app/templates/application.hbs file in an editor, and replace the contents of the file with the following:

    You can think of the {{#linkTo ...}} and {{/linkTo}} entries as <a href="..."> and </a>; anything between the two will be rendered as a link in the browser. The difference is that these tell Ember to automatically wire up the link to the specified route. For example, {{#linkTo posts}} will link to the '/posts' route.

    {{outlet}} defines where other templates will be loaded into the page. As the templates are added in the following steps, you'll be able to click the Posts and Write link to see how the templates are loaded into the page.

    Once you've finished pasting in the code for this page, save it. If you are running the grunt server and viewing the page in a browser, the page will go blank as the links currently point to non-existent routes. Those will be added next.

  2. Next, open the emberapp/app/scripts/app.js file and find the comment '//put your routes here'. Add a new line under the comment and add the following to define a posts and newpost route:

    Save the file. If you are running the grunt server and viewing the page in the browser, the page will refresh and you should see the following:

    At this point the links on the navbar don't actually work, as the templates that they route to don't exist yet.

  3. Create a new file named posts.hbs in the emberapp/app/templates directory. Use the following as the content of this file:

    After saving the file, you should be able to click the Posts link on the navbar and see the static page defined by this template:

  4. Create a new file name newpost.hbs in the emberapp/app/templates directory. Use the following as the content of this file:

    Don't worry about the various Handlebars statements above quite yet, I'll discuss them after adding the controller to handle new posts. Just understand for now that this defines an input form that will be used to author new blog posts. After you save this file, the Write link on the navbar should display a page similar to the following:

     

  5. Open the emberapp/app/scripts/app.js file and add the following after the 'var App = window.App = Ember.Application.create();' line:

    This defines the controller that handles creating a new post when you click the Save button. For now, it's just going to output the title you entered in the console. Save the file and then try submitting a new post. You can see the console output in the web browser by enabling developer tools (F12 in IE, FireFox menu -> developer tools -> toggle tools for FireFox) and looking at the console output. Here's how this would look in IE:

Understanding the newpost template and controller

Looking back at the newpost.hbs template, you'll notice that the Save button has an {{action save}}. This tells it what action to invoke on the controller. In this case, save: function(). So that's how we get to the controller, but where does the data come from?

The {{view Ember.TextField valueBinding="title" class="span6" placeholder="Title"}} and other view statements are the trick. These define not only the input fields of the page, but they also define/associate the 'value' property of the input fields with specific properties of the controller. For example, valueBinding="title" binds the title property to the value of the title field on the form. In the controller you can get the value through this.get('title'), which is what this currently uses to log the value to the console.

Summary

At this point, the application has a few static pages, a controller to handle submission of new forms, but that's about it. In the next post I'll wire up Windows Azure Mobile Services to store blog posts, change the posts.hbs to display a list of posts, and add a route and template to handle displaying individual posts.