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>