Need to dive into the MVC Javascript web application framework known as Ember.js and only have 10 minutes? Look no more!
The following is all done in the same page. In my case, it is index.html.
1. Get Ember.js, Handlebars.js and jQuery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com/tags/v1.3.0/ember.js"></script>
2. Start your application
In this case myApp is our application. myApp can be changed to whatever you want. Just be sure to keep it in mind to reference later.
<script type="text/javascript">
window.myApp = Ember.Application.create();
</script>
3. Setup a route or two
<script type="text/javascript">
myApp.Router.map(function() {
this.resource('index', { path: '/' });
this.resource('about', { path: 'about' });
});
</script>
The first parameter of this.resource() corresponds to a <script type="text/x-handlebars"> element with a matching data-template-name attribute.
For example:
this.resource('foo', { path: '/foo-page' });
refers to:
<script type="text/x-handlerbars" data-template-name="foo">
<p>some html...</p>
</script>
and would be accessed by http://[your url]/foo-page.
4. Make your views
<html>
<body>
<script type="text/x-handlebars" data-template-name="index">
<h1>Index Page</h1>
<p>{{#link-to 'about'}}about{{/link-to}}</p>
</script>
<script type="text/x-handlebars" data-template-name="about">
<h1>About Page</h1>
<p>{{#link-to 'index'}}home{{/link-to}}</p>
</script>
</body>
</html>
View the final product here.
5. Next Steps
- Exploring Handlebars
- Data Binding/Modeling