Ember.js: Model.createRecord not working, not erroring

Question

Working on an application which allows Accounts to Post Messages to social media. I'm trying to save my first Message to the Ember Data store but it doesn't seem to be working. Problem is that it's also not erroring so I'm not sure what's going on. Here's the setup:

Models

Social.Account = DS.Model.extend({
    username: DS.attr('string'),
    messages: DS.hasMany('Social.Message')
});

Social.Message = DS.Model.extend({
    user_id: DS.attr('number'),
    text: DS.attr('string'),
    accounts: DS.hasMany('Social.Account'),
    posts: DS.hasMany('Social.Post')
});

Social.Post = DS.Model.extend({
    created: DS.attr('date'),
    text: DS.attr('string'),
    message: DS.belongsTo('Social.Message')
});

Data

Social.Account.FIXTURES = [{
    id: 1,
    username: "commadelimited",
    messages: [1, 2]
}];

Social.Message.FIXTURES = [{
    id: 1,
    user_id: 1,
    text: 'This is message #1 sent by account #1',
    accounts: [1],
    posts: [1]
}, {
    id: 2,
    user_id: 1,
    text: 'This is message #2 sent by account #1',
    accounts: [1],
    posts: [2]
}];

Social.Post.FIXTURES = [{
    id: 1,
    created: "5 minutes ago",
    text: 'This is post #1 sent by account #1, tied to message #1'
}, {
    id: 1,
    created: "5 minutes ago",
    text: 'This is post #2 sent by account #1, tied to message #2'
}];

In the context of Social.NewPostView I have a button which calls a submit method

Social.NewPostView = Ember.View.extend({
    tagName: 'div',
    submit: function(e) {
        msg = Social.Message.createRecord({
            id: 1,
            user_id: 1,
            text: 'This was a created message',
            created: "2013-02-27 13:09:22",
            accounts: [1],
            posts: [1]
        });
        console.log('done');
    }
});

I can trigger an alert box when the user clicks the button, so I know the method is firing. You can see that I've hardcoded a createRecord call here (but in the app I'm using user inputted data). The log statement displays in the console, but I don't see a UI change as expected. Additionally when I introspect the account object for user 1 I get 0 length:

Social.Account.find().objectAt(0).get('messages').get('length')

When I run this statement in the console I do get something displayed:

Social.Message.createRecord({ user_id: 1, text: 'This was a created message', created: "2013-02-27 13:09:22", accounts: [1], posts: [1] })

But it's a complex object and I'm not sure what it actually is. I'm basing my code off @toranb's complex-ember-data-example project and it seems comparable. I'm sure I'm doing something wrong, but I don't know what it is. Any input would be valued.

UPDATE 1

By logging Social.Message.find().get('length') prior to submitting I get 0. If I hit submit, then immediately run the same log statement I get the following:

4
Uncaught Error: Attempted to handle event `loadedData` on <Social.Message:ember427:1> while in state rootState.loaded.created.uncommitted. Called with undefined

That indicate that the Message is indeed getting created, but is not showing up in the UI. What might my next steps be?

I've also attempted to implement becameError and becameInvalid errors as explained here (http://stackoverflow.com/a/13845348/506230) but to no avail. — commadelimited, Feb 28 '13 at 22:19
Since `.find()` might be delayed, you can't (shouldn't) call `.get('length')` on it right away. It is best to save it to a variable and then call length on that variable. Additionally, it seems like this might be better located in the controller rather than the view. — RyanJM, Mar 01 '13 at 01:46
Turns out that it was in part an issue with the many to many relationship we had set up. — commadelimited, Mar 01 '13 at 19:38

Cyril Fluck · Accepted Answer · 2013-03-01T22:48:04.410

2

You set the id when creating your record. I'm not familiar with the FixtureAdapter but this doesn't look like a good idea in any case.

UPDATE:

I just tried in a sample project and was able to reproduce your bug by setting the id when calling createRecord.

So use this code instead:

Social.NewPostView = Ember.View.extend({
  tagName: 'div',
  submit: function(e) {
    msg = Social.Message.createRecord({
//      id: 1,
        user_id: 1,
        text: 'This was a created message',
        created: "2013-02-27 13:09:22",
        accounts: [1],
        posts: [1]
    });
    console.log('done');
    }
});

You already have a record with the id 1 in your fixtures.

UPDATE 2:

I have an open PR to demonstrate this problem and to give a better error message

https://github.com/emberjs/data/pull/770

edited Mar 01 '13 at 22:48

answered Feb 28 '13 at 23:27

Cyril Fluck

1,561
7
9

Damn. If that's it, I'm going to kick myself. You'd think that Ember would at least throw some sort of alert regarding that. – commadelimited Mar 01 '13 at 00:49
Cyril...that wasn't it. Removing the id line still doesn't result in the message showing up on the page. Would you care to post your example project in a Fiddle? – commadelimited Mar 01 '13 at 14:50

Ember.js: Model.createRecord not working, not erroring

1 Answers1