Introduction to ember-data-partial-model

Introduction to ember-data-partial-model

347a1b64f3a6e38981bc99b53919e2b1?s=128

karol.galanciak

March 19, 2016
Tweet

Transcript

  1. Introduction to ember-data-partial-modal Karol Galanciak

  2. Who Am I • I’m from Poland • Full-stack developer

    at Ragnarson • Working on BookingSync • @Azdaroth Twitter • https://karolgalanciak.com
  3. ember-data-partial-model Why bother? • Fetching the data you actually need

    to display
  4. ember-data-partial-model Why bother? • Fetching the data you actually need

    to display • JSON may get huge
  5. ember-data-partial-model Why bother? • Fetching the data you actually need

    to display • JSON may get huge • Expensive queries on API-side to return all attributes
  6. ember-data-partial-model Expected payload for `index` action { "data": [ {

    "id": "1", "type": "users", "attributes": { "fullname": "Lazar Angelov" } }, { "id": "2", "type": "users", "attributes": { "fullname": "Rich Piana" } }, ] };
  7. ember-data-partial-model Expected payload for `show` action { "data": { "id":

    "1", "type": "users", "attributes": { "fullname": "Lazar Angelov", "bio": "Huuuge amount of text goes here", "attribute1": "some value", "attribute101": "some value" } } };
  8. ember-data-partial-model Partial models // app/models/user.js import DS from 'ember-data'; import

    { PartialModel, partial } from 'ember-data- partial-model/utils/model'; const { attr } = DS; export default PartialModel.extend({ fullname: attr(), extended: partial('user', 'extended', { bio: attr() }) });
  9. ember-data-partial-model Real world usage let users = await store.findAll('user'); let

    user = users.objectAt(1); user.get('extended'); user.get('bio') === user.get('extended.bio'); // inside template {{user.bio}}
  10. ember-data-partial-model How to use - adapters // app/adapters/application.js import DS

    from 'ember-data'; import PartialModelAdapter from 'ember-data- partial-model/mixins/adapter'; const { JSONAPIAdapter } = DS; export default JSONAPIAdapter.extend(PartialModelAdapter);
  11. ember-data-partial-model How to use - serializers // app/serializers/application.js import DS

    from 'ember-data'; import PartialModelJSONAPISerializer from 'ember-data- partial-model/mixins/jsonapi-serializer'; const { JSONAPISerializer } = DS; export default JSONAPISerializer.extend(PartialModelJSONAPISerializer);
  12. ember-data-partial-model How to use - serializers // app/serializers/application.js import DS

    from 'ember-data'; import PartialModelRESTSerializer from 'ember-data- partial-model/mixins/rest-serializer'; const { RESTSerializer } = DS; export default RESTSerializer.extend(PartialModelRESTSerializer);
  13. ember-data-partial-model How to use - custom serializer import Ember from

    'ember'; import baseSerializerMixin from 'ember-data-partial-model/mixins/base- serializer'; const { Mixin } = Ember; export default Mixin.create(baseSerializerMixin, { _normalizePartialRelationship: function(modelClass, resourceHash, descriptor) { // add this function to handle normalization of partial extension as a relationship. }, _copyAttributesFromPartialToParent: function(serializedHash, partialHash) { // add this function to handle copying attributes from partial extension to top-level hash. }, });
  14. ember-data-partial-model How to use - store import DS from 'ember-data';

    import PartialModelStore from 'ember-data-partial- model/mixins/store'; const { Store } = DS; export default Store.extend(PartialModelStore, {});
  15. ember-data-partial-model Gotcha: Processing partial extension properties • Use case: display

    uppercased Twitter handle from partial extension
  16. ember-data-partial-model Gotcha: Processing partial extension properties import Ember from 'ember';

    export default Ember.Component.extend({ twitter: function() { return (this.get('user.twitter') || '').toUpperCase(); }.property('user.twitter') });
  17. ember-data-partial-model Ensuring all properties are populated user.loadPartials().then(() => { //

    do something after all properties are populated });
  18. Thanks!