EmberJs Einführung

Ember.js A framework for creating ambitious applications Dominik Goltermann –
[email protected]

Why Ember.js? • PROVIDES ARCHITECTURE – MVC – States •
ELIMINATE BOILERPLATE • HIGHLIGHTS – Bindings – Computed properties – Auto-updating templates

Built in Goodies • String Manipulation • Utility Functions 'item_one
item2 third_item'.w() => ["item_one", "item2", "third_item"] 'Hello Mr. %@ the %@'.fmt('Derpy', 'Squid') => "Hello Mr. Derpy the Squid" Ember.typeOf('s'), Ember.typeOf([1,2]), Ember.typeOf(x: 1) => "string", "array", "object" Ember.makeArray(1) => [1] Ember.keys(x: 1, y: 2) => ["x", "y"]

Array Comprehensions • map, reduce, filter etc. var data =
[0,1,2,3,4,5,6,7,8,9,10]; data.map(function(i) { return i * 2; }); => [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20] data.reduce(function(sum, i){ return sum += i; }); => 55 data.filter(function(i) { return i % 2 == 0; }); =>[0, 2, 4, 6, 8, 10]

Computed Properties var object = Ember.Object.create({ width: 100, aspectRatio: 1,
computedHeight: function() { return this.get("width") * this.get("aspectRatio"); }.property("width", "aspectRatio") }); object.set("aspectRatio", 0.5); object.get("computedHeight") => 50

Observers var object = Ember.Object.create({ width: 100, aspectRatio: 1, doSomethingOnChange:
function(object, property) { // do something }.observes("width", "aspectRatio") }); object.set("width", 0.5); => object.doSomething() gets called

Ember App Structure

var Todo = Em.Object.extend({ title: null, isDone: false }); var
aTodo = Todo.create({ title: "Buy milk", isDone: false });

Controllers Todos.todosController = Em.ArrayController.extend({ content: [], createTodo: function(title) { var
todo = Todos.Todo.create({ title: title }); this.pushObject(todo); }, clearCompletedTodos: function() { this.filterProperty('isDone', true).forEach(this.removeObject, this); }, remaining: function() { return this.filterProperty('isDone', false).get('length'); }.property('@each.isDone') });

Views <script type="text/x-handlebars"> {{#view Todos.StatsView}} <a href="#" {{action target="controller“ action="clearCompletedTodos"}}>
Clear Completed Todos </a> {{remainingString}} remaining {{/view}} </script> Todos.StatsView = Em.View.extend({ remainingString: function() { var remaining = this.get('remaining'); return remaining + (remaining === 1 ? " item" : " items"); }.property('remaining') });

Hello World App = Ember.Application.create(); App.ApplicationView = Ember.View.extend({ templateName: 'application'
}); App.ApplicationController = Ember.Controller.extend(); App.Router = Ember.Router.extend({ root: Ember.Route.extend({ index: Ember.Route.extend({ route: '/' }) }) }); App.initialize();

Router James.Router = Ember.Router.extend({ root: Ember.Route.extend({ // ... someDetailRoute: Ember.Route.extend({
route: '/some/route/', connectOutlets: function(router, context) { router.get('applicationController').connectOutlet('someDetail'); } }); }) }); <body> <script type="text/x-handlebars" data-template-name="application"> <h1>Hello World!</h1> {{outlet}} </script> </body>

Router Matches route:'/some/route' connectOutlets() •Instanz von Application Controller wird verbunden
mit neuer Instanz von someDetailView Rendering •SomeDetailView wird gerendert und in {{outlet}} ausgegeben <body> <script type="text/x-handlebars" data-template-name="application"> {{outlet}} </script> </body>

Router James.Router = Ember.Router.extend({ loading: Ember.State.extend({ // ... }), root:
Ember.Route.extend({ // ... entryDetail: Ember.Route.extend({ route: '/personal/:id', connectOutlets: function(router, context) { router.get('personalStreamController').connectOutlet('entryDetail', context); }, deserialize: function(router, params) { var entry = James.Entry.create({id: params.id}); var deferred = $.Deferred(); entry.findResource().done( function(e) { deferred.resolve(entry); }); return deferred.promise(); } }); }) });

Router Matches route:'/personal/:id' deserialize(router, {id: 1151}); return deferred.promise(); Switching to
loading State Ajax returns deferred.resolve(entry); connectOutlets() •Insert EntryDetailView mit Kontext {id: 1151} <body> <script type="text/x-handlebars" data-template-name="application"> {{outlet}} </script> </body>

Ember App Structure

EmberJs Einführung

EmberJs Einführung

Dominik Goltermann

More Decks by Dominik Goltermann

Other Decks in Programming

Featured

Transcript

Ember.js A framework for creating ambitious applications Dominik Goltermann –

Why Ember.js? • PROVIDES ARCHITECTURE – MVC – States •

Built in Goodies • String Manipulation • Utility Functions 'item_one

Array Comprehensions • map, reduce, filter etc. var data =

var Person = Ember.Object.extend({ say: function(thing) { alert(thing); } });

var Person = Ember.Object.extend({ say: function(thing) { alert(thing); } });

Computed Properties var object = Ember.Object.create({ width: 100, aspectRatio: 1,

Observers var object = Ember.Object.create({ width: 100, aspectRatio: 1, doSomethingOnChange:

Ember App Structure

Ember App Structure

var Todo = Em.Object.extend({ title: null, isDone: false }); var

Controllers Todos.todosController = Em.ArrayController.extend({ content: [], createTodo: function(title) { var

Views <script type="text/x-handlebars"> {{#view Todos.StatsView}} <a href="#" {{action target="controller“ action="clearCompletedTodos"}}>

Hello World App = Ember.Application.create(); App.ApplicationView = Ember.View.extend({ templateName: 'application'

Router James.Router = Ember.Router.extend({ root: Ember.Route.extend({ // ... someDetailRoute: Ember.Route.extend({

Router Matches route:'/some/route' connectOutlets() •Instanz von Application Controller wird verbunden

Router James.Router = Ember.Router.extend({ loading: Ember.State.extend({ // ... }), root:

Router Matches route:'/personal/:id' deserialize(router, {id: 1151}); return deferred.promise(); Switching to

Ember App Structure