Date post: | 24-Dec-2015 |
Category: |
Documents |
Upload: | pece-eminagov |
View: | 12 times |
Download: | 0 times |
“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