Embed Size (px)
Citation preview
Spiel, Spaß, Spannung mit ember js
Spiel, Spaß, Spannung mit ember js
Spiel, Spaß, Spannung mit ember js3 |
ember js
A framework for creatingambitious web applications
ember js
l Convention over configuration
l Kein lästiger Boilerplate-code
l Templatebasiert (handlebar)
l Basierend auf Sproutcore
Spiel, Spaß, Spannung mit ember js4 |
Hello world
Spiel, Spaß, Spannung mit ember js5 |
Hello
world
!
Spiel, Spaß, Spannung mit ember js6 |
Templating
ember
Spiel, Spaß, Spannung mit ember js7 |
M-V-
C
ember
Spiel, Spaß, Spannung mit ember js8 |
model… view… controller…
Spiel, Spaß, Spannung mit ember js9 |
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('last Name');
}.property('firstName', 'lastName')});
model… view… controller…
Spiel, Spaß, Spannung mit ember js10 |
one-to-many:
App. Post = DS.Model.extend({comments: DS. hasMany ('App. Comment')
});
App. Comment = DS.Model.extend({post: DS. belongsTo ('App. Post ')
});
model… view… controller…
Spiel, Spaß, Spannung mit ember js11 |
var persons = App.Person. find ();
var peter = App.Person. find ({ name: "Peter" });
peter. set (‘lastName', “Gabriel");
peter. incrementProperty ('age');
Spiel, Spaß, Spannung mit ember js12 |
model… view… controller…
model… view… controller…
Spiel, Spaß, Spannung mit ember js13 |
<html><head>
<script type=" text/x-handlebars " data-template-name =" say-hello ">
Hello, <b >{{view.name}} </b></script>
</head></html>
model… view… controller…
Spiel, Spaß, Spannung mit ember js14 |
<html><head>
<script type=" text/x-handlebars " data-template-name =" say-hello ">
Hello, <b >{{view.name}} </b></script>
</head></html>
var view = Ember.View.create({templateName : ' say-hello ',name: "Bob"
});
model… view… controller…
Spiel, Spaß, Spannung mit ember js15 |
{{#view App.ClickableView}}This is a clickable area!
{{/view}}
App. ClickableView = Ember.View.extend({click : function(evt) {
alert("ClickableView was clicked!");}
});
model… view… controller…
Spiel, Spaß, Spannung mit ember js16 |
Properties
dekoriert
model… view… controller…
Spiel, Spaß, Spannung mit ember js17 |
Properties
dekoriert
Application Properties- transiente Zustandsinformationen- applikationsbezogen
- z.B. expandStatus eines Bereiches
model… view… controller…
Spiel, Spaß, Spannung mit ember js18 |
App. SongController = Ember. ObjectController .extend({soundVolume : 1
});
App. SongsController = Ember. ArrayController .extend({longSongCount : function() {
var longSongs = this. filter (function(song) {return song.get( 'duration ') > 30;
});return longSongs.get('length');
}.property('@each.duration')});
model… view… controller…
Spiel, Spaß, Spannung mit ember js19 |
App. SongController = Ember. ObjectController .extend({soundVolume : 1
});
routing
Spiel, Spaß, Spannung mit ember js20 |
routing
Spiel, Spaß, Spannung mit ember js21 |
App. Router .map(function() {this. route (" about ", { path: "/about" });this. route (" favorites ", { path: "/favs" });
});
routing
Spiel, Spaß, Spannung mit ember js22 |
App. Router .map(function() {this. route (" about ", { path: "/about" });this. route (" favorites ", { path: "/favs" });
});
Template: about
Controller: aboutController
Route: aboutRoute
URL: /about
Spiel, Spaß, Spannung mit ember js23 |
object model
object model
Spiel, Spaß, Spannung mit ember js24 |
App. Person = Ember. Object.extend ({say : function(thing) {
var name = this.get('name');alert(name + " says: " + thing);
}});
object model
Spiel, Spaß, Spannung mit ember js25 |
App. Person = Ember. Object.extend ({say : function(thing) {
var name = this.get('name');alert(name + " says: " + thing);
}});
Simon says: Hi!
object model
Spiel, Spaß, Spannung mit ember js26 |
App. Person = Ember. Object.extend ({say : function(thing) {
var name = this.get('name');alert(name + " says: " + thing);
}});
App. NicePerson = App. Person.extend ({say : function(thing) {
this._super (thing + ", nice to meet you"); }
});
object model
Spiel, Spaß, Spannung mit ember js27 |
App. Person = Ember. Object.extend ({say : function(thing) {
var name = this.get('name');alert(name + " says: " + thing);
}});
App. NicePerson = App. Person.extend ({say : function(thing) {
this._super (thing + ", nice to meet you"); }
});
Simon says: Hi, niceto meet you!
object model
Spiel, Spaß, Spannung mit ember js28 |
Person = Ember.Object.extend({firstName: null,lastName: null,
fullName : function() {var firstName = this.get('firstName');var lastName = this.get('lastName');
return firstName + ' ' + lastName;}. property ( 'firstName ', 'lastName ')
});
var tom = Person.create({firstName: "Tom",lastName: "Dale"
});
tom.get('fullName') // "Tom Dale"
object model
Spiel, Spaß, Spannung mit ember js29 |
Do you rememberArrayController…?
App. SongsController = Ember.ArrayController.extend({longSongCount : function() {
var longSongs = this.filter(function(song) {return song.get('duration') > 30;
});return longSongs.get('length');
}. property('@each.duration')});
object model
Spiel, Spaß, Spannung mit ember js30 |
Observer
person. addObserver ('fullName', function() {// deal with the change
});
person.set('firstName', "Peter");
App. DefWeek = Ember.Object.create({when: '24-27. Juni'
});
App. WebDefConf = Ember.Object.create({whenBinding : 'App.DefWeek.when'
});
Binding
ember data
Spiel, Spaß, Spannung mit ember js31 |
• Lädt Daten aus der Persistenz / JSON
• Zentraler DataStore für die Anwendung• DS.Model.extend()• save()
• Adapter zur Anbindung• REST• Basic• …
� https://github.com/emberjs/data
handlebars
Spiel, Spaß, Spannung mit ember js32 |
� http://handlebarsjs.com/� https://github.com/wycats/handlebars.js/
• expressions
• {{name}}
• block expressions
• {{#list people}} {{name}}{{/list}}
• paths
• {{author.name}}
• helpers
• with: {{#with author}}
• each: {{#each people}}
• …
Spiel, Spaß, Spannung mit ember js33 |
Pitfalls
l Fehler im handlebar-templating schwer nachvollziehbar
l Dokumentation
l noch keine Finale 1.0
l viel Doku und Beispiele zu Version 0.9.x -> API breaks
l ember data noch in einem sehr frühen Stadium
Spiel, Spaß, Spannung mit ember js34 |
Pitfalls
Spiel, Spaß, Spannung mit ember js35 |
but it‘s worth trying!
Spiel, Spaß, Spannung mit ember js36 |
Vielen Dank
eXXcellent solutions GmbHBeim Alten Fritz 2
89075 Ulm
http://[email protected]
Bildquellen:http://www.sxc.hu/
Ben EarwickerGarrison Photography, Boise, IDwww.garrisonphoto.org
