What is Ember?

A Framework for Creating Ambitious Web

Applications
-

Less code with Handlebars

Updates automatically

Incorporates common idioms

Build for productivity

MV* architecture

Getting started
www.emberjs.com

Obtaining and dependencies

-

jQuery

Handlebars

Ember.js

Ember Data
<!-- ... additional lines truncated for brevity ... -->
<script src="js/libs/jquery-1.11.1.min.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/libs/ember-data.js"></script>
</body>
<!-- ... additional lines truncated for brevity ... -->

Core Concepts
-

Templates

Router

Components

Models

Route

Controllers

Handlebars
www.handlebarsjs.com
Build semantic templates effectively

<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>

Ember Handlebars
Conditions
{{#if person}}
Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!
{{/if}}
List of items
<ul>
{{#each person in people}}
<li>Hello, {{person.name}}!</li>
{{/each}}
</ul>
Attributes
<div id="logo">
<img {{bind-attr src=logoUrl}} alt="Logo">
</div>

Ember Handlebars
Links
<ul>
{{#each photo in photos}}
<li>{{#link-to 'photos.edit' photo}}{{photo.title}}{{/link-to}}</li>
{{/each}}
</ul>
Input
{{input type="text" value=firstName disabled=entryNotAllowed size="50"}}

Ember Handlebars
Actions
{{#if isExpanded}}
<div class='body'>{{body}}</div>
<button {{action 'contract'}}>Contract</button>
{{else}}
<button {{action 'expand'}}>Show More...</button>
{{/if}}
App.PostController = Ember.ObjectController.extend({
// initial value
isExpanded: false,
actions: {
expand: function() {
this.set('isExpanded', true);
},
contract: function() {
this.set('isExpanded', false);
}
}
});

Ember Handlebars
Development helpers
{{log}}
{{debugger}}
Rendering
{{partial}}
{{view}}
{{render}}

Routing
App.Router.map(function() {
this.route("about", { path: "/about" });
this.route("favorites", { path: "/favs" });
});
App.Router.map(function() {
this.resource('posts', { path: '/posts' }, function() {
this.route('new');
});
});

Heads up! You get a few routes for free: the ApplicationRoute and the IndexRoute (corresponding to the /
path).

Components
<script type="text/x-handlebars" id="components/blog-post">
<h1>Blog Post</h1>
<p>Lorem ipsum dolor sit amet.</p>
</script>
<h1>My Blog</h1>
{{#each post in model}}
{{blog-post}}
{{/each}}

Controllers
App.ApplicationController = Ember.Controller.extend({
// the initial value of the `search` property
search: '',
actions: {
query: function() {
// the current value of the text field
var query = this.get('search');
this.transitionToRoute('search', { query: query });
}
}
});

Views
-

When you need sophisticated handling of user events

When you want to create a re-usable component

<script type="text/x-handlebars" data-template-name="say-hello">

Hello, <b>{{view.name}}</b>
</script>
var view = Ember.View.create({
templateName: 'say-hello',
name: "Bob"
});
view.appendTo('#container');

Views
Example of Handling events

{{#view "clickable"}}
This is a clickable area!
{{/view}}
App.ClickableView = Ember.View.extend({
click: function(evt) {
alert("ClickableView was clicked!");
}
});

Testing
-

Integration Tests
Unit Tests

QUnit - example of testing framework

test('root lists first page of posts', function(){

visit('/posts');
andThen(function() {
equal(find('ul.posts li').length, 3, 'The first page should have 3 posts');
});
});

Application