Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Intro to Ember.js

No description

Glen Selle

on 22 April 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Intro to Ember.js

Questions A Little History Introduction to Ember.js Ember's Design Models Views Controllers Router Templates Templates Templating Basics in Ember.js Ember.js uses Handlebars.js There are two ways to use Handlebars.js Inline via <script> tags In files with .handlebars file extensions which are precompiled during a build step and then concatenated into a .js file which is included on the page Variables With Handlebars.js to print out variables on the page within the current controller context: 2007 2011 Apple announces at their WWDC that MobileMe (now iCloud) is built using SproutCore and iWork.com (released later) also uses SproutCore. 2008 2011 2011 2013 A company called SproutIt builds a framework called Sproutcore for a mail application they were building. SproutCore 2.0 was released. It was made to expose more MVC-like paradigms. The SproutCore team releases a new project called SproutCore UI designed to help developers build UIs for mobile devices. SproutCore is renamed to Ember.js in order to reduce confusion between it and the old SproutCore 1.0 widget library. Ember.js Rc 1 is released Views The Purpose of Views Views are meant to translate user events (ie click, drag, press, etc.) into controller actions. A Simple View In Ember you could create a view to handle click events like so: Controllers Basic Controller Concepts Controllers have properties Templates->Controllers->Models are one-way relationships Controller properties are great for application-life variables Defining Controllers To define a controller with several properties: Models Models & Ember-Data Ember.js uses a separate library called Ember Data to handle its models Define a store Create your models Define a store Router The Two Parts of Routing Ember needs two things to start working with routes: A Map Routers Maps Here's what an Ember router map looks like: App.Router.map(function() {
this.route("about", { path: "/about" });
this.route("favorites", { path: "/favs" });
}); FavoritesController favorites Template: Controller: Router: FavoritesRoute Naming Routes Ember uses a route's name to deduce which controller, router and template it should use--not the url. this.route("about", { path: "/about" }); This: Is the same as: One map per application Many routes for different controllers this.route("about"); URL paths aren't required if the path is the same as the route's name. For example: A generic Ember app will have: Ember will automatically use the following when going to /favs Dynamic Segments In Ember you specify dynamic routes using a colon before an identifier. For example, /posts/816 would be defined like so: App.Router.map = Ember.Route.extend({
this.route("posts", { path:"/posts/:post_id" });
}); App.PostsRoute = Ember.Route.extend({
model: function(params) {
return App.Post.find(params.post_id);
}); Nesting Routes Ember allows you to create nested routes in you router map which might look like /posts/:post_id/comments/new using a resource: App.Router.map(function(){
this.resource("post", { path: "/post/:post_id" }, function () {
this.resource("comments", function() {
}); One responsibility of a router is to transform a url into a model Now you can assign a model based on the dynamic segment: Nesting Routes Ember allows you to create nested routes in you router map which might look like /posts/:post_id/comments/new using a resource: App.Router.map(function(){
this.resource("post", { path: "/post/:post_id" }, function () {
this.resource("comments", function() {
}); Getting started is twofold: App.Store = DS.Store.extend({
revision: 12,
adapter: "FixtureAdapter"
}); To define a store: App.Person = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
birthday: DS.attr('date'),

fullName: function() {
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName')
}); Define a model To define a model: App.PostController = Ember.ObjectController.extend({
darkTheme: true,
firstName: "Glen",
collapsed: false
}); Ember creates a controller for the index route even if you don't App.PostController = Ember.ObjectController.extend({
toggleCollapse: function(){
return !this.get('collapsed');
}); To define controller actions you do this: <script type="text/handlebars" data-template-name="song">
{{#each controller}}
<div id="songTemplate">
<div id="title>{{title}}</div>
<div id="artist">{{artist}}</div>
</script> If Else Statements You can create simple if else statements with Handlebars like so: <script type="text/handlebars" data-template-name="song">
<div class="entry">
{{! only output this author names if an author exists }}
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
<h1>Unknown Author</h1>
</script> Unless Statements In Handlebars.js the unless statement is the opposite of the if statement: <script type="text/handlebars" data-template-name="song">
<div class="entry">
<div class="entry">
{{#unless license}}
<h3 class="warning">This entry does not have a license!</h3>
</script> {{#view App.ClickableView}}
This is a clickable area!
{{/view}} App.ClickableView = Ember.View.extend({
click: function(evt) {
alert("ClickableView was clicked!");
}); Sending Events Define your view in app.js: App.ClickableView = Ember.View.extend({
click: function(evt) {
this.get('controller').send('turnItUp', 11);
}); Two Things Could Happen App.PlaybackController = Ember.ObjectController.extend({
turnItUp: function(level){
//Do your thing
}); App.PlaybackRoute = Ember.Route.extend({
events: {
turnItUp: function(level){
//Not called if it's defined on App.PlaybackController
}); The controller handles it: Or, if the controller action is not defined, it is sent to a route:
Full transcript