Burning alive with ember.js
What is ember?
A framework for creating ambitious web applications.
Framework
-
Guides you into doing the right thing.
-
Answers the trivial questions for you.
- Solves the 80% use case.
Ambitious
- Well defined layers keep code manageable.
- Performance built into the framework.
- Security built into the framework.
web applications
- Transition in state changes the URL
Structure of an ember app
Application
App = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_TRANSITIONS_INTERNAL: true,
LOG_VIEW_LOOKUPS: true,
LOG_ACTIVE_GENERATION: true
});
Responsibility
- Namespace for application.
- Setting application wide configuration.
Template
<script type="text/x-handlebars" data-template-name='application'>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Bloggr</a>
<ul class="nav">
<li>{{#link-to 'posts'}}Posts{{/link-to}}</li>
<li>{{#link-to 'about'}}About{{/link-to}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
Responsibility
- Defines HTML to be rendered.
- Specifies how to bind data.
- Specifies events that are propagated.
Router
App.Router.map(function() {
this.resource('about');
this.resource('posts', function() {
this.resource('post', { path: ':post_id' });
});
});
Responsibility
- Maps a URL into a Route, Controller, View, and Template
- Defines dynamic segments that can be used to reconstruct application state.
Route
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return this.store.find('stackFlow', DiscoverySettings.stackFlow);
}
});
Responsibility
- Deserializing the URL into a model.
- Serializing the model into a URL.
- Providing the controller with it's data.
- Managing transitions between states.
Controller
App.OptionController = Ember.ObjectController.extend({
needs: ['stacks'],
selected: function(){
return this.get('controllers.stacks.model').contains(this.get('model'));
}.property('controllers.stacks.model', 'model')
});
Responsibility
- Act as a decorator to the model.
- Provide the template it's data.
- Respond to state changing events.
- Manage representational state.
View
MyView = Ember.View.extend({
classNameBindings: ['propertyA', 'propertyB'],
propertyA: 'from-a',
propertyB: function() {
if (someLogic) { return 'from-b'; }
}.property()
});
Responsibility
- Defining wrapping tag for template.
- Handling animation.
- Responding to representational events.
the ugly
metamorph
<li id="ember3402" class="ember-view option iphone">
<figure class="option-figure">
<img src="https://cdn.gazelle.com/gz_attachments/product_image/230/949/3/iphone_5s_16.jpg" data-bindattr-2="2" class="option-image">
<figcaption class="option-name"><script id="metamorph-8-start" type="text/x-placeholder"></script>iPhone<script id="metamorph-8-end" type="text/x-placeholder"></script></figcaption>
</figure>
</li>
fix coming soon
HTMLBars
get/set
person.get('name');
person.set('name', 'jack');
Though, there are nice semantics, since this is necessary.
var person = people.findBy('name');
person.get('address.city');
Demo
Burning alive with ember.js
By blatyo
Burning alive with ember.js
- 780