AN INTRODUCTION TO EMBER
Ember is a javascript framework for developing ambitious web applications (http://emberjs.com/)The objective of this post is to get a simple Ember application up and running. The sample application I will use is based on a fictitious Drama School. Over the coming weeks I will be building on it by using more Ember Components. It is a good place to start if Ember is unfamiliar territory.
A couple of things you need to know and do first;
- Ember does not need a webserver to run. Just use a text editor and open in a browser.
- You do need to call the Ember.js libraries in your index.html page and these can be downloaded from http://emberjs.com/
- Finding ember-data was a little more confusing so I used http://builds.emberjs.com/ and copied the contents of the ember-data.prod.js file to my mac. (I simply created an empty file, called it ember-data.js and copied the contents from the link above into it. I then saved this to the folder where I was developing my web application - /Users/sorchakeane/code/emberDev/js)
STEP 1: Index.html
Create a new index.html page in your editor and in the <head> section do the following;
STEP 2: app.js
Create a new file, I've called mine app.js. Create your Ember application with the following;
Note: LOG_TRANSITIONS is helpful for debugging as it will log out a message to the browser each time a page is accessed.
You need to create an application only once, obviously you can call it whatever suits your purpose but essentially I have just name-spaced my application to MyDramaSchool.
STEP 3: Ember Router
All page requests start here. Every page in the application will be defined in the Router.It takes what has been entered in the url and renders the correct route.
It then replaces the {{outlet}} found in the application template with the relevant template (will cover templates in step 4).
Say for example the url entered was www.mydramaschool.com/#about. Ember will know to render the 'about' route and load the 'about' template. Be aware that if Ember cannot find the 'about' route object, it will go ahead and create one for us to ensure the application still runs. As I have not explicitly created one that is exactly what will happen for the MyDramaSchool site.
This may sound confusing but will be covered in much more detail in the coming posts. It is just good to know at this point.
In the code below I create a new route called ‘about’ inside the Ember Router.
STEP 4: Handlebars Template
The next task involves setting up some templates using handlebars.
Handlebars templates are just like html however they also give you the option of using expressions.Handlebar expressions allow us to insert a variable or method result into a html page.
Our Ember application will provide the variables and methods to utilise in these expressions.
Create a main template that will be used to load in the different web pages (templates) in the application. Do this inside the index.html page. It should look similar to this;
The {{outlet}} you see above is called a handlebars expression. Basically the handlebars {{outlet}} gives the code a hint as to where templates should be inserted.
The footer should most likely be static and the navbar div will likely contain the navigation links.
The {{link-to}} in the navigation is a Ember helper method that generates a link between routes, but is made accessible to our templates.
The tagName is a way to tell Ember that it is a list element.
Finally I will create a new template and call it 'about'. It is this template that will be loaded into the container div above.
You should now be able to open your browser and navigate to your index.html page. I use Chrome and avail of the ember inspector extension https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en
It's really beneficial for debugging.Next post will cover Ember Controllers and build on what has been covered here. We have only touched on it so far but Ember really is worth getting to know!
