Ember.js (2.5.0) how to set nested object value

Question

Sounds like a simple enough thing to do yet is causing me all sorts of grief.

I have a simple server model which has a few nested objects,

export default DS.Model.extend({
    type: DS.attr('string'),
    attributes: DS.attr(),
    tasks: DS.attr()
});

I can create a new record in the route using

export default Ember.Route.extend({

    model() {
        return this.store.createRecord('server');
    },

    actions: {
        create(server) {
            server.save().then(() => this.transitionTo('servers'));
        }
    }
});

and in the related .hbs I'm setting a few properties of attributes and tasks using value=model.attributes.name from a form for example.

This all works fine. I however want to add a few more properties from the route during create such as default values.

Using server.set('attributes.size', 'large'); doesn't work as Ember doesn't know about size yet as it's a new record.

I can use setProperties but this seems to wipe out every other value

server.setProperties({
    attributes: {
        size: "large"
    },
        tasks: {
            create: true
    }
});

size is now correctly set, however name is now null because I didn't specify it in the setProperties...

What's the proper way to go about this? Surely I don't need to map out all the properties in setProperties? That seems wasteful and very error prone.

Something I've thought is should attributes just be its own model and have a relationship with Server? Even though this is always a 1-to-1 and 1-to-1 relationship?

Answer 1

I would recommend using ember-data-model-fragments addon as a solution in this case.

https://github.com/lytics/ember-data-model-fragments

Other option using a separate model for attributes and setting up a 1-to-1 relation. Both would be belongsTo, however it is depend on your database and API also, so you have to align your backend system to match with this new structure.