In the last post Ember JS – Single Web Application, we jumped right in. We downloaded Ember JS and fired up our own modified version of the application.  So let’s go a bit deeper.
Ember JS take a lot, a whole lot, from Ruby on Rails and other Convention Over Configuration (CoC) Web Application frameworks.  It is important to note just how important CoC is.  For one thing, you code faster and less, because you dont’ have to think about configuration and since you use a convention over and over, you don’t even have to think about what to name certain things.  All of that, mean you save time, and can be more productive.
In the last post on Ember JS, we saw one of the most minimalist application.  We have a .js file (app.js) which created our Ember JS application and added a Route (more on route later). That file looked like this:
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return [‘red’, ‘yellow’, ‘blue’];
}
});
The function ‘model’ in the IndexRoute is there from the original Ember Starter Kit code.  We didn’t change that.
Then we had our .html file which included the app.js file and several other js files before it.  Those other js files are a constant in your Ember JS application, because they are the dependencies (jQuery and Handlebars) and Ember JS itself.  This was all we had in the HTML file, index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Ember Starter Kit</title>
<link rel=”stylesheet” href=”css/normalize.css”>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<script type=”text/x-handlebars”>
<p>{{input type=”text” value=name}}</p>
This is my name: {{name}}
</script>
<script src=”js/libs/jquery-1.9.1.js”></script>
<script src=”js/libs/handlebars-1.0.0-rc.3.js”></script>
<script src=”js/libs/ember-1.0.0-rc.3.js”></script>
<script src=”js/app.js”></script>
</body>
</html>