ember data

Click here to load reader

Post on 14-Jul-2015

375 views

Category:

Documents

1 download

Embed Size (px)

TRANSCRIPT

  • Ember data:The coolest construction zone in JS today

    By: Jason Cox & Javon Harper@jasocox@javonharper

    ShareMySpace.com

  • Introduction

  • What is Ember Data?

    Automagic everything!

    Persistence/Retrieval Updating UI (no event handling/triggering!) Relationships

  • Why are we using it?

    Because we are using ember.js

    It's new, shiny, and fun!

    It's saved a lot of time with writing code (mostly)

    Fewer lines of code == fewer bugs

  • Defining Models

  • Getting Started

    Make your model filejavascripts/models/user.js

    App.User = DS.Model.extend({// Stuff goes here

    });

  • Types

    App.User = DS.Model.extend({firstName: DS.attr(string),lastName: DS.attr(string)

    });

    Type: string, number, boolean, and date

  • Calculated Fields/MethodsApp.User = DS.Model.extend({

    firstName: DS.attr(string),lastName: DS.attr(string),

    fullName: function() { return this.get('firstName') + ' ' + this.get('lastName');}.property('firstName', 'lastName')

    });

  • RelationshipsApp.User = DS.Model.extend({

    firstName: DS.attr(string),lastName: DS.attr(string),

    fullName: function() { return this.get('firstName') + ' ' + this.get('lastName');}.property('firstName', 'lastName'),

    profile: DS.belongsTo(App.Profile),favorites: DS.hasMany(App.Beer)

    });

  • Code samplehttps://github.com/nicholaides/ember-sample-app

  • REST Adapter

  • What is it?

    Used by Ember Data for all loading and storing

    Allows several customizations (more following)

    Could write your own (e.g., for XML or RESTlike)

  • Retrieving Your Data

    var firstPost = App.Post.find(1);

    var posts = App.Post.find();

    var people = App.Person.find({ name: "Peter" });

  • var transaction = this.get('store').transaction();

    transaction.add(user);

    user.set('age', 100);

    transaction.commit();

    Updating Your Data

  • Pluralization (i.e., person: people) Endpoint Path Host Transformations (more following)

    Adapter Configurations

  • Transformations

    When string, number, boolean, and date aren't enough.

    DS.RESTAdapter.registerTransform('coordinatePoint', { serialize: function(value) { return [value.get('x'), value.get('y')]; }, deserialize: function(value) { return Ember.create({ x: value[0], y: value[1] }); }});

    App.Cursor = DS.Model.extend({ position: DS.attr('coordinatePoint')});

  • Adapter Conveniences

    Sideloading, or embedding associations

    Identity map (ember data)

    "Everything in Ember.js is bindings-aware"

  • Model Lifecycle

  • States & Events

    Offers a handful of flags to express state isLoaded, isDirty, isValid + more Provides helpful events didCreate, didUpdate, didDelete,

    becameError, didLoad + more

  • Examples

    beer.on(becameError, function() {invokeBlindRage();

    });

  • Code samplehttps://github.com/javonharper/ember-sample-app

  • Other Frameworks

  • Gotchas

  • Questions & Answers

  • Links

    http://emberjs.com/guides/models/http://discuss.emberjs.com/https://github.com/emberjs/datahttp://stackoverflow.com/questions/tagged/ember.js