Ember JS intro

Kodar-lan, 2013-07-13

Intro + kodning

Rickard Andersson

Montania System AB

Webbutveckling, Drift, IT-säkerhet, Linux

PHP, JS, CSS/SCSS.

Symfony, Ember JS

Ember JS

• Model
• View (handlebars)
• Controller
• Route / Router
• Ember Data (external)

Router

Mappar URL mot en template

App.Router.map(function() {
    this.route('about');
    this.route('contact');
    this.resource('posts', function() {
        this.route('detail', { path: '/:post_id' });
    });
});
            

Convention over configuration

// this.route('about');
App.AboutController = ...;
App.AboutRoute = ...;
App.AboutView = ...;
            

// this.resource('posts', function() {
//   this.route('detail', { path: '/:post_id' });
// });
App.PostsController = ...;
App.PostsIndexController = ...;
App.PostsDetailController = ...;
App.PostsRoute = ...;
// ...
                

Route

Sätter upp data för kontrollern

App.AboutRoute = Ember.Route.extend({
    model:function() {
        return ...;
    }
});
            

Template

Defierar UI

Controller

Hanterar events, proxy mellan template och model

App.AboutController = Ember.ObjectController.extend({
    contact: function() {
        // ...
    }
});
            

Model

Definerar hur din data ser ut

var App.BlogPost = Ember.Object.extend({
    summary:function() { ... }
});

var post = App.BlogPost.create({title:'...', ...});
                

var App.BlogPost = DS.Model.extend({
    title: DS.attr('string'),
    body: DS.attr('string'),
    created: DS.attr('date'),
    summary: function() { ... }
});

var post = App.BlogPost.createRecord({title:'...', ...});
               

Dags att koda!

$ git clone https://github.com/rickard2/EmberJS-Intro.git