I am having issues loading a belongsTo relationship - no errors get displayed, and no requests sent. The UI just remains blank. Given the following models:
project.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr(),
items: DS.hasMany('line-item', {async: true}),
customer: DS.belongsTo('customer', {async: false})
});
customer.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr(),
email: DS.attr(),
projects: DS.hasMany('project', {async: true})
});
The relationship between project and customer exists. When accessing the projects endpoint, the project gets correctly returned:
{
"data":{
"type":"projects",
"id":"3861b834-e270-4296-b7be-9aca55676874",
"attributes":{
"created":"2016-04-27T22:36:01.061349Z",
"modified":"2016-04-27T22:36:01.061477Z",
"name":"Sample name",
},
"relationships":{
"customer":{
"data":{
"type":"customers",
"id":"9242bd41-6bb0-41ed-b5f3-21df26486d9e"
}
},
"items":{
"meta":{
"count":0
},
"data":[
]
}
}
}
}
However when trying to access the customer, nothing happens (with nothing I mean: no console output, no request to the customers endpoint etc. The UI just fails to load):
this.get('project').get('customer');
Accessing other attributes works (including the project's items).
Any idea as to where I am going wrong?
In your project model you defined customer as async: false, which means it should be provided when loading the projects from your server. From the json output you provided the customer data is missing.
So either include the customer record when returning the json from your server or make customer async: true, so it will get loaded when calling project.get('customer')
Related
I have a survey app built with Ember JS and a Firebase backend with Emberfire adapter.
Here are the relevant portions of my user model:
//app/models/user.js
export default DS.Model.extend({
name: DS.attr(),
sessionuid: DS.attr(),
surveysToTake: DS.hasMany('survey', { async: true, inverse: 'respondents' }),
surveysCreated: DS.hasMany('survey', { async: true, inverse: 'creator' }),
responseSetsSubmitted: DS.hasMany('response-set', {async: true, inverse: 'respondentid'}),
respSetSurveyLookup: DS.attr({defaultValue: function() { return []; }})
});
And my responseSet (which is a collection of responses from a user)
//app/models/response-set.js
export default DS.Model.extend({
responses: DS.hasMany('response', { async: true, inverse: 'responseSet' }),
survey: DS.belongsTo('survey', { async: true, inverse: 'responseSets' }),
respondentid: DS.belongsTo('user', {async: true, inverse: 'responseSetsSubmitted'}),
});
And the survey model looks like this:
//app/models/survey.js
export default DS.Model.extend({
title: DS.attr(),
questions: DS.hasMany('question', { async: true, inverse: 'survey' }),
respondents: DS.hasMany('user', { async: true, inverse: 'surveysToTake'}),
responseSets: DS.hasMany('response-set', { async: true, inverse: 'survey' })
});
Now, when creating a user we do something like this ...
//routes/addusers.js (in the actions hook after getting properties from the controller)
var user = store.createRecord('user', {
id: userData.uid,
name: name
});
var responseSet = store.createRecord('response-set', {
survey: survey,
respondentid: user
});
user.setProperties({
'respSetSurveyLookup': [{'surveyId': _this.currentModel.get('id'),
'respSetId': responseSet.get('id')}],
'surveysToTake': [_this.currentModel]
});
_this.currentModel.get('respondents').pushObject(user);
Ember.RSVP.all([user.save(), _this.currentModel.save(), responseSet.save()])
.then(function(){
controller.setProperties({ multipleUsers: '', showAddUsers: false});
});
The user gets added as expected. However, in my template (which shows up on the same route as the 'add users' section,) the same record shows up multiple times.
Additional info:
I'm using Ember 1.13.11 with Ember Data 1.13.11 and EmberFire
1.6.3
Refreshing the page or reloading (with a 'location.reload()' ) causes
the user records to show up as expected.
This is possibly related to an Ember data issue which appears to be now closed and an upgrade of Ember data may resolve this in the future. However, is there anything I can do in the meantime to handle this issue ?
I have a json like
{
"meta":{
"per":20,
"page":1,
"total":2
},
"users":[
{
"id":119506,
"first_name":"erglk",
"last_name":"wfe",
"email":"bent#exemple.com",
"groups":[
{
"id":5282,
"name":"test"
},
{
"id":8880,
"name":"everybody"
}
]
},
{
"id":119507,
"first_name":"eriglk",
"last_name":"wife",
"email":"benit#exemple.com",
"groups":[
{
"id":5284,
"name":"testf"
},
{
"id":8880,
"name":"everybody"
}
]
}
]
}
For the moment no problem to access the user but I have some difficulties to access the groups array. I've tried hasMany and belongsTo without success. I had errors.
I've read few articles about EmbededRecordMixin but without any success.
If I declare in my models :
export default DS.Model.extend({
first_name: DS.attr('string'),
last_name: DS.attr('string'),
email: DS.attr('string'),
groups: DS.attr('group')
});
I get : Error while processing route: users Assertion Failed: Unable to find transform for 'group' Error: Assertion Failed: Unable to find transform for 'group'
We use DS.attr to tell Ember that this field is an attribute of a model, and optionally we can specify a type of this attribute. By default, only allowed types are string, number, boolean, and date. To support custom type, special class (transform) should be defined. That's what Embers is trying to tell you with this error message. How to define such class, you may find here
But, you don't need to define a custom transform for your task. You need to define a relationship:
export default DS.Model.extend({
first_name: DS.attr('string'),
last_name: DS.attr('string'),
email: DS.attr('string'),
groups: DS.hasMany('group', {async: false})
});
And use an EmbeddedRecordMixin, as described in official docs. I can assure you that it works as described there.
I ran into the same issue, and figured out a fix given Gennady & Beni's responses, but it still took some time for me to get up and running.
see http://emberjs.com/api/data/classes/DS.EmbeddedRecordsMixin.html
I created app/serializers/user.js:
import DS from 'ember-data';
export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
isNewSerializerAPI: true,
attrs: {
groups: { embedded: 'always' },
}
});
and in app/model/user.js
export default DS.Model.extend({
groups: DS.hasMany('group', {async: false}),
});
And then the model loaded the embedded properties right up!
So I added an http-mock for users that returns just a single user on the get route like so...
usersRouter.get('/:id', function(req, res) {
res.send({
"users": {
"id": 1,
"pin": 1234,
"first_name": "John",
"last_name": "Doe",
"email": "email#example.com",
"phone": 8436376960
}
});
});
In my model I have this
import DS from 'ember-data';
export default DS.Model.extend({
pin: DS.attr('number'),
first_name: DS.attr('string'),
last_name: DS.attr('string'),
email: DS.attr('string'),
phone: DS.attr('number')
});
and in my action when I submit a form I have this to perform the get request
return this.store.find('user',id);
when I click on the submit button I see in the console a 404 error to the get url like so
GET http://localhost:4200/users/1 404 (Not Found)
do I need to do anything else to get this mock to work? I didn't see anything about needing an adapter or serializer to get the mock to work
I noticed when generating an http-mock in ember-cli the express app code states
app.use('/api/users', usersRouter);
and ember was just looking at /users/:id so I simple generated an application adapter, rest was fine here, and set the namespace like so
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
'namespace': 'api'
});
I decided to go with this approach as apposed to removing the api url endpoint from the app.use because future http-mocks will use the api endpoint in their app.use and I thought it best for future generation of http-mocks to just create an adapter.
I have a system where I want users to add flags (hashtags) to items. Here's my models:
Social.Item = DS.Model.extend({
source: DS.belongsTo ('source'),
url: DS.attr (),
post_timestamp: DS.attr(),
summary: DS.attr(),
item_flags: DS.hasMany('item_flag', {async: true})
});
Social.Flag = DS.Model.extend({
kind: DS.attr(),
name: DS.attr(),
item_flags: DS.hasMany('item_flag', {async: true})
});
Social.ItemFlag = DS.Model.extend({
item: DS.belongsTo('item', {async: true}),
user: DS.belongsTo('user', {async: true}),
flag: DS.belongsTo('flag', {async: true}),
});
Here's the relevant handlebars code:
{{#each item in site.sorted_items itemController="item"}}
{{{item.summary}}}
{{#each item_flag in item.item_flags}}{{item_flag.flag}}*FF*{{/each}}
{{/each}}
The system outputs a few FF tags for each item - there's definitely item_flag elements in the database, and I can see the calls on my REST endpoint - the system is requesting the item_flags from the database. It just seems like the object on the other side of the belongsTo relationship isn't available here. I tried extending the ItemFlag model to contain this code:
flag_string: function() {
return this.get('flag').then(function (data) {return data.get('name')});
}.property('flag')
But that just throws a NPE - this.get('flag') on the ItemFlag model returns null. There seems to be some mention of an "embed: always" defined on the adapter, but (a) that's from pre- ember-data-beta days, and (b) it didn't help (also, my records aren't embedded).
What I want to do in the general case here is figure out how to look at a model's parent model, as defined by the relationships in the database.
Turns out, I fell afoul of the new ember-data serializer expectations. My item_flag serializer was responding with json that looked like {id: 1, flag_id:1, user_id:1} when what it should have looked like was {id: 1, flag:1, user:1}. This caused (apparently), the item_flag to get created without the proper parameters.
I am working on an application using ember.js and a couch DB backend. So far, i used ember-resource as database driver, but I am considering switching to ember-data, since this seems to be more sustainable.
Since I am working with couch DB, I am using the Couch DB-Adapter.
The documents in my database contain complete object structures, so I have to specify embedded objects in the database driver.
But although I am specifying my sub-objects as embedded, ember-data seems to fetch these objects with separate requests, instead of just getting them out of the main json.
My object definitions are as follows:
App.UserProfile = DS.Model.extend({
type: DS.attr('string'),
fullname: DS.attr('string'),
email: DS.attr('string'),
pictureUrl: DS.attr('string'),
social: DS.hasMany('App.SocialWebAccount', { embedded: true }),
.....
});
App.SocialWebAccount = DS.Model.extend({
profile: DS.belongsTo('CaiMan.UserProfile'),
site: DS.attr('string'),
account: DS.attr('string'),
.....
});
and the server data ist something like this:
{
"_id": "thoherr",
"_rev": "55-d4abcb745b42fe61f1a2f3b31c461cce",
"type": "UserProfile",
"fullname": "Thomas Herrmann",
"email": "test#thoherr.de",
"pictureUrl": "",
"social": [
{
"site": "socialFacebook",
"account": "thoherr"
},
{
"site": "socialXing",
"account": "Thomas_Herrmann7"
},
{
"site": "socialEmail",
"account": "test#thoherr.de"
}
]
}
After loading, the UserProfile does contain an ArrayProxy for my social data, which is populated by three entries, but they are all undefined instead of instances of SocialWebAccount!
If i try to access this array, ember-data seems to do a separate database access to fetch the data, which then leads to an error because the couch DB-adapter accesses an _id field, which is not available in undefined....
What am i missing?
I thought the "embedded" flag signals that the data is already in the json and the objects can be instantiated from the json?
Why does ember-data try to fetch the embedded data?
Any hint?
It seems that the embedded option has changed recently. I found some information in the test files on the ember-data github.
In these test files, the embedded content is defined like this
Comment = App.Comment = DS.Model.extend({
title: attr('string'),
user: DS.belongsTo(User)
});
Post = App.Post = DS.Model.extend({
title: attr('string'),
comments: DS.hasMany(Comment)
});
Adapter = DS.RESTAdapter.extend();
Adapter.map(Comment, {
user: { embedded: 'always' }
});
or
Adapter = DS.RESTAdapter.extend();
Adapter.map(Comment, {
user: { embedded: 'load' }
});
'always' seems to be used for embedded data without ids (your case),eg
id: 1,
title: "Why not use a more lightweight solution?",
user: {
name: "mongodb_expert"
}
'load' seems to be used for embedded data with ids
id: 1,
user: {
id: 2,
name: "Yehuda Katz"
}
Hoping it will help in your particular case. I've had a lot of trouble with hasMany relationships recently (I had to modify my adapter to get it work)