“A Framework for Creating Ambitious Web Applications”

- Less code with Handlebars

- Updates automatically

- Incorporates common idioms

- Build for productivity

- MV* architecture

What is Ember?

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

<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');

- When you need sophisticated handling of user events

- When you want to create a re-usable component

Views

{{#view "clickable"}}This is a clickable area!{{/view}}

App.ClickableView = Ember.View.extend({ click: function(evt) { alert("ClickableView was clicked!"); }});

Example of Handling events

Testing

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'); });});

- Integration Tests- Unit Tests

QUnit - example of testing framework

Application