Diving into Ember.js: Part 1
Creating the skeleton
If you develop this application in conjunction with Padrino, check out the
guides how to create a Padrino project. In addition, it makes sense to add
So, assume we have
Prepare vendor code
Handlebars is the default template language for Ember.js, but you can (and should) use Emblem.js over it. Emblem is yet another slim-like template language. Download these libraries and save them into the
Set up the application entry point
Ok. Look at the
application.js file. The so-called
manifest (was brought with
asset pipeline) is an application entry point. We’re going to include some libraries here:
Furthermore, you need to add the line at the end to bootstrap the application.
App(or any other name) is the namespace of the application:
Create the application structure
So, as we do the MVC application, we should provide a specific structure, also keeping in mind Ember features. Based on that assertion, we need to create the next directories:
We also need to create a
router.js file to describe application routes.
According to official docs on Ember known, when your application boots, the framework will look for some objects:
App.ApplicationController, and the
application template. This means, we should initialize them with
Eventually, create a bare
application.emblem file in the
templates directory. Our next step is to create a file where we can list all these dependencies. Let’s name it as our namespace—
Don’t forget to include this file into
application.js. Its full view looks as shown below.
Create static content
Now, we’ll try to print out the standard
HELLO WRLD! message. So, we have an application template. It’s the so-called application layout. Let’s add our welcoming message to it as shown below.
If we reload the browser page, we’ll see nothing, because all the templates have to be precompiled previously.
Meet Grunt.js and, in particular, grunt-emblem. Please, watch this nice intro for Grunt, if you have no idea about it. You can also consult with theinstallation how-to. To read about
grunt-emblem installation, please check out the project’s GitHub repo. You also need to learn how to use the grunt-contrib-watch plugin in order to add the
Since this article isn’t about Grunt, I’ll just list
Right now, we have two tasks:
grunt emblem:compile and
grunt emblem:compile command produces
templates.js. So, we need to get back to
app.js file and add
templates.js to the requirements’ list.
You can start the
grunt watch command in the terminal, and all your templates will be precompiled every time you’ve changed them.
Lastly, reload the page, and you should see the message.
You can guess that a lot of details were left behind the scenes. For details, browse through the commits history on GitHub. In the next parts, we’ll create a kind of CRUD application. Stay tuned.