Ember setting array in the DS -> impossible?

Question

I have an array which is deep into an Ember-data model(the votes inside the pics inside the imagepost):

App.Imagepost = DS.Model.extend({
    title: DS.attr( 'string' ),
    pics: DS.attr(), // array of objects
});

App.Imagepost.FIXTURES = [
    {
        id: 1,
        title: 'First day of school outfit',
        pics: [
            {
                url: 'https://example.com/wow.jpg',
                votes: [1, 22, 55] // List of voters' ids
            },
            {
                url: 'https://example.com/funny.jpg',
                votes: [7] // List of voters' ids
            }
        ]
    }
]

Now I want to remove a vote from it but without using x.set(); the change is not reflected into the template nor into Ember-data

This is my code(ImageController):

        var ob = this.get('model').objectAt(0).get('pics').objectAt(0);
        console.log(ob);
        votes_array.splice(user_id_index, 1);
        ob.set('votes', votes_array);
        console.log(ob);

Gives the following error: (on the ob.set line)

Uncaught TypeError: undefined is not a function

So if I try it like this:

        var ob = this.get('model').objectAt(0).get('pics').objectAt(0);
        console.log(ob);
        ob.votes = [];
        console.log(ob);

I get this error:

Uncaught Error: Assertion Failed: You must use Ember.set() to access this property (of [object Object])

If I could change this weird and long line:

this.get('model').objectAt(0).get('pics').objectAt(0);

Into something like:

this.get('model[0].pics[0]'));

Maybe it could work since i could do the same thing with a set instead of a get but this method doesnt work(how can i access an array? my controller is ArrayController but with this.get() i can't really access my model)

But for now I just can't figure it out, I just want to make votes: [1, 22, 55] into [22, 55] from the controller and that the change will be reflected in the template & Ember-data.
By the way if I change the array in a compnent it doesn't reflect the changes either.

Also something weird this line gives me undefined although the title is set:

this.store.find('imagepost', 1).get('title')

@kingpin2k Added(above the fixtures), i think this problem is hard :P — kfir124
@kingpin2k i can't use the hasMany or any relations since it is not suitable with my mongo backend, the pics array of objects for example will be embedded — kfir124

Kingpin2k Kingpin2k · Accepted Answer · 2014-06-14T22:04:52

set/get are defined on objects that derive from Ember.Object. You are working with POJOs once you get past the first layer of your Ember Data properties. As you saw, you're getting the error Uncaught TypeError: undefined is not a function. In the case of using POJOs with Ember you can still use the getters and setters, but not directly on the instance. e.g.

var foo = { a: 'asdf'};
// getting, bar will contain 'asdf'
var bar = Ember.get(foo, 'a');

// setting, foo.a will be 'piano'
Ember.set(foo, 'a', 'piano');

Array access can happen with indexing

{{foo.0.foo.1.bar}}

or

Em.get(foo, '0.foo.1.bar');

Example: http://emberjs.jsbin.com/yabateji/1/edit

the store returns promises, so you need to wait for them to resolve before accessing properties off of the record.

this.store.find('imagepost', 1).then(function(record){
  console.log(record.get('title'));
});

Collection access, I'd recommend creating some computed property (on the controller) that references an arbitrary location in the array, instead of using index access for anything other than firstObject and lastObject.

console.log(model.toArray().get('0.color'));
console.log(model.get('firstObject.color'));

http://emberjs.jsbin.com/OxIDiVU/666/edit

Ember setting array in the DS -> impossible?

1 Answers