Monthly Archives: December 2013

Loading JSON with embedded records into Ember Data 1.0.0 beta

This is a follow-up to my last post that showed how to export an ember data object with embedded relationships into one nested JSON structure. This time we’ll take the same JSON and load it back into ember.

Here’s the JSON object we’ll be importing:

{"child": {
    "name": "Herbert",
    "toys": [{
        "kind": "Robot",
        "size": {
          "height": 5,
          "width": 5,
          "depth": 10
        },
        "features": [{
            "name": "Beeps"
          },{
            "name": "Remote Control"
        }]
    }]
  }
}

This should create a child record, with one toy that has size and a couple features. The model definition looks like this:

App.Child = DS.Model.extend({
    name: DS.attr('string'),
    toys: DS.hasMany('toy', {embedded: 'always'}),
});
Ember.Inflector.inflector.irregular("child", "children");
App.Toy = DS.Model.extend({
    kind: DS.attr('string'),
    size: DS.belongsTo('size', {embedded: 'always'}),
    features: DS.hasMany('feature', {embedded: 'always'})
});
App.Size = DS.Model.extend({
    height: DS.attr('number'),
    width: DS.attr('number'),
    depth: DS.attr('number')
});
App.Feature = DS.Model.extend({
    name: DS.attr('string')
});

Continue reading Loading JSON with embedded records into Ember Data 1.0.0 beta

Serializing Embedded Relationships with Ember Data 1.0.0 beta

In the latest Ember Data (currently 1.0.0-beta.4) saving or serializing embedded records doesn’t work the way some of us wish. By default it will serialize the parent record and include a list of IDs for the nested records. This is good practice and fine for data that will be stored in a SQL database, however, my project needs to export the entire structure into a single JSON that will be saved to a file. Even though you cannot do this out of the box, adding just a few lines of code will get it working!
Continue reading Serializing Embedded Relationships with Ember Data 1.0.0 beta

Good UX for Placeholders as Field Labels (i.e. Float Labels)

Checkout my follow-up CSS only solution

UPDATE: My floating labels were featured on CSS Tricks!

I know that it is well understood that using placeholder labels are bad practice. However, they continue to be used because they make forms appear tight, and responsive for mobile devices. Unfortunately, in practice they don’t provide a very good user experience.
Continue reading Good UX for Placeholders as Field Labels (i.e. Float Labels)