I have four models
//models/exam.js
name: attr('string'),
owner: belongsTo('user'),
//models/question.js
content: attr('string'),
exam: belongsTo('exam')
//models/answer.js
owner: belongsTo('user'),
question: belongsTo('question'),
answer: attr('string'),
remarks: attr('string'),
exam: belongsTo('exam')
//models/user.js
owner : attr('string'),
email : attr('string'),
password : attr('string'),
I load the models into a route. Then, when I run the following template code,
{{#each model.answers as |ans|}}
<p>{{ans.question.content}}</p>
{{/each}}
//route.js
import Route from '#ember/routing/route';
import { hash } from 'rsvp';
export default Route.extend({
model: function(params){
return hash({
student: this.store.findRecord('student',params.id),
answers: this.store.query('answer',{
owner: params.id
}),
});
}
});
it shows the output as follows
<frontend#model:question::ember276:5>
<frontend#model:question::ember281:6>
<frontend#model:question::ember286:4>
why is it showing such an code, why not showning the original content?
I think you encountered a very special and rare case. The content has a special meaning for ember relationships. That's internal stuff and an end-user should not deal with it. But that's the reason, why you get
<frontend#model:question::ember276:5>
for
{{ans.question.content}} {{!-- .content doesn't return the content attribute --}}
I would work around it by changing the attribute's name at server and ember-model. If I server's attribute-name is not mutable, I would customize the ember-serializer. I.e.:
//app/serializers/person.js (ember g serializer question)
import DS from 'ember-data';
export default DS.JSONAPISerializer.extend({
attrs: {
questionContent: 'content' //map server's attribute content to ember-model's questionContent
}
});
Related
I have a model for a speaker as follows:
import attr from 'ember-data/attr';
import ModelBase from 'open-event-frontend/models/base';
import { belongsTo, hasMany } from 'ember-data/relationships';
export default ModelBase.extend({
/**
* Attributes
*/
name : attr('string'),
email : attr('string'),
photoUrl : attr('string'),
thumbnailImageUrl : attr('string'),
shortBiography : attr('string'),
longBiography : attr('string'),
speakingExperience : attr('string'),
mobile : attr('string'),
location : attr('string'),
website : attr('string'),
twitter : attr('string'),
facebook : attr('string'),
github : attr('string'),
linkedin : attr('string'),
organisation : attr('string'),
isFeatured : attr('boolean', { default: false }),
position : attr('string'),
country : attr('string'),
city : attr('string'),
gender : attr('string'),
heardFrom : attr('string'),
/**
* Relationships
*/
user : belongsTo('user'),
event : belongsTo('event'),
sessions : hasMany('session')
});
And a model for a session as follows:
import attr from 'ember-data/attr';
import moment from 'moment';
import ModelBase from 'open-event-frontend/models/base';
import { belongsTo, hasMany } from 'ember-data/relationships';
import { computedDateTimeSplit } from 'open-event-frontend/utils/computed-helpers';
const detectedTimezone = moment.tz.guess();
export default ModelBase.extend({
title : attr('string'),
subtitle : attr('string'),
startsAt : attr('moment', { defaultValue: () => moment.tz(detectedTimezone).add(1, 'months').startOf('day') }),
endsAt : attr('moment', { defaultValue: () => moment.tz(detectedTimezone).add(1, 'months').hour(17).minute(0) }),
shortAbstract : attr('string'),
longAbstract : attr('string'),
language : attr('string'),
level : attr('string'),
comments : attr('string'),
state : attr('string'),
slidesUrl : attr('string'),
videoUrl : attr('string'),
audioUrl : attr('string'),
signupUrl : attr('string'),
sendEmail : attr('boolean'),
isMailSent: attr('boolean', { defaultValue: false }),
createdAt : attr('string'),
deletedAt : attr('string'),
submittedAt : attr('string', { defaultValue: () => moment() }),
lastModifiedAt : attr('string'),
sessionType : belongsTo('session-type'),
microlocation : belongsTo('microlocation'),
track : belongsTo('track'),
speakers : hasMany('speaker'),
event : belongsTo('event'), // temporary
creator : belongsTo('user'),
startAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date'),
startAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time'),
endsAtDate : computedDateTimeSplit.bind(this)('endsAt', 'date'),
endsAtTime : computedDateTimeSplit.bind(this)('endsAt', 'time')
});
As is clear, session and speaker share a many-to-many relationship. So I am adding the session to the speaker and then saving them. Both the records are successfully created on the server but the link is not established. I have tested the server endpoint with postman and it works fine. So, I guess I am missing something here.
This is the controller code:
import Controller from '#ember/controller';
export default Controller.extend({
actions: {
save() {
this.set('isLoading', true);
this.get('model.speaker.sessions').pushObject(this.get('model.session'));
this.get('model.session').save()
.then(() => {
this.get('model.speaker').save()
.then(() => {
this.get('notify').success(this.get('l10n').t('Your session has been saved'));
this.transitionToRoute('events.view.sessions', this.get('model.event.id'));
})
.catch(() => {
this.get('notify').error(this.get('l10n').t('Oops something went wrong. Please try again'));
});
})
.catch(() => {
this.get('notify').error(this.get('l10n').t('Oops something went wrong. Please try again'));
})
.finally(() => {
this.set('isLoading', false);
});
}
}
});
As #Lux has mentioned in comment, ember-data does not serialize has-many relationships in all cases by default. This is true for all Serializers that extend DS.JSONSerializer and not overriding shouldSerializeHasMany() method. This is the case for DS.JSONAPIAdapter and DS.RESTSerializer.
The logic used to determine if a many-relationship should be serialized is quite complex and not well documented. So looking in source code is needed for details.
In general a has-many relationship is serialized if and only if:
If enforced by Serializer configuration. To configure Serializer to enforce serializing a specific relationship, the attrs option must contain a key with relationship name holding an object { serialize: true }.
If not forbidden by attrs configuration of Serializer. It's the opposite of 1. The attrs option contains a key with relationship name holding an object { serialize: false }.
If it's a many-to-none relationship meaning there is no inverse relationship.
If it's a many-to-many relationship.
Accordingly to your question, a many-to-many relationship is not serialized. There could be many things causing your issue but I bet it's this one:
If I got you right, both records of the many-to-many relationship are not yet persisted on server. I assume you don't generate IDs client-side. So both records won't have an ID at beginning. Therefore the relationship can't be serialized on first create request (this.get('model.session').save()). Your API response well to this request. The response includes the information that this record does not have any related speaker. ember-data updates it's store with the information returned by your API. This update includes removing the relationship created before. The second create request (this.get('model.speaker').save()) serializes the relationship but as not existing since that's the current value in store.
If that's the case, you could simply create one of the records before assigning the relationship and afterwards save the other one, which will persist the relationship on server.
As suggested by #jelhan, I had to save on the models first and then add the relationship. The following code worked:
import Controller from '#ember/controller';
export default Controller.extend({
actions: {
async save() {
try {
this.set('isLoading', true);
await this.get('model.speaker').save();
this.get('model.speaker.sessions').pushObject(this.get('model.session'));
await this.get('model.session').save();
await this.get('model.speaker').save();
this.get('notify').success(this.get('l10n').t('Your session has been saved'));
this.transitionToRoute('events.view.sessions', this.get('model.event.id'));
} catch (e) {
this.get('notify').error(this.get('l10n').t('Oops something went wrong. Please try again'));
}
}
}
});
I'm attempting to set the belongsTo relationship using a dropdown.
So I have my Books model:
import DS from 'ember-data';
export default DS.Model.extend({
// Relationships
author: DS.belongsTo('author'),
name: DS.attr()
});
And my Author model:
import DS from 'ember-data';
export default DS.Model.extend({
// Relationships
author: DS.hasMany('books'),
name: DS.attr()
});
My Books/new route:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return Ember.RSVP.hash({
book: this.store.createRecord('book'),
authors: this.store.findAll('author')
})
},
actions: {
saveBook(newBook) {
newBook.book.save().then(() => this.transitionTo('book'));
},
willTransition() {
this.controller.get('book').rollbackAttributes();
}
}
});
And my Books/new template:
<label >Book Name</label>
{{input type="text" value=model.name placeholder="Book Name"}}
<label>Author</label>
<select>
{{#each model.authors as |author|}}
<option value="{{author.id}}">
{{author.name}}
</option>
{{/each}}
</select>
<button type="submit"{{action 'saveBook' model}}>Add Book</button>
If I remove the select element and just save the name of the book it works fine, but with it I get this: (where id is an auto-generated ID)
Error: Some errors were encountered while saving app#model:book id
at reportError (firebase.js:425)
at firebase.js:445
at tryCatch (ember.debug.js:58165)
at invokeCallback (ember.debug.js:58177)
at publish (ember.debug.js:58148)
at publishRejection (ember.debug.js:58091)
at ember.debug.js:37633
at invoke (ember.debug.js:339)
at Queue.flush (ember.debug.js:407)
at DeferredActionQueues.flush (ember.debug.js:531)
I think I need to do something like getting the author object and setting book.author to that, but I can't find a clear explanation of how. Especially as I can't even work out how to get the data from that select menu in the route!
I feel like I'm missing something pretty simple here, anyone have any insight?
I would suggest moving this functionality to your controller.js where it belongs. Why is your relation to books in AuthorModel called author instead of books?
I would suggest rewriting your action (in the controller) to something like this:
saveBook(newBook) {
newBook.set('author', this.get('selectedAuthor') // or just the call below if you go with the alternative below
newBook.save().then(() => this.transitionTo('book'));
},
Now the problem persists, that you don't have a binding to your selected author. I would suggest using something like ember-power-select to bind your selected author to a controller property.
Then you would do this in your template:
{{#power-select
placeholder="Please select Author"
onchange=(action "authorSelectionChanged")
options=model.authors
as |author|}}
{{author.name}}
{{/power-select}}
And in your actions within your controller:
authorSelectionChanged(author) {
this.get('model.book').set('author', author);
// or the following if you go with the alternative above
this.set('selectedAuthor', author);
}
DEBUG: Ember : 1.7.1
DEBUG: Ember Data : 1.0.0-beta.12
DEBUG: Handlebars : 1.1.2
DEBUG: jQuery : 1.10.2
Having an issue with what I believe is the belongsTo attribute on my user model. (This happens on my other belongsTo attributes within my application as well). I have a Django backend which returns a response when I comment out the network: attribute.
{
email: "test#test.com",
first_name: "Test",
global_code: "daht64q691zy4k887ch",
global_id: "GBID-USER-dat64q6917zy4k887ch",
institution_gbid: "GBID-GINS-567j53ey0lojsu2kys",
institution_name: "Some University",
last_name: "Testing",
network: { },
view_policy: {
capability: "system:view",
description: "Anyone can view a user",
hold: true,
id: "daht64q691y4k887ch:system:view",
values: ""
}
}
Code for the User Model:
App.User = DS.Model.extend({
first_name: DS.attr('string'),
last_name: DS.attr('string'),
global_id: DS.attr('string'),
network: DS.belongsTo('basicgrouping')
}):
Code for Basic Grouping model:
App.Basicgrouping = DS.Model.extend({
global_id: DS.attr('string'),
name: DS.attr('string'),
gbid_code: function(){
return getGBIDCode(this.get('global_id'));
}.property('global_id')
});
Debugging ember-data I placed a console.log() within the following code:
relationshipsByName: Ember.computed(function() {
var map = Map.create();
this.eachComputedProperty(function(name, meta) {
console.log(name, meta);
if (meta.isRelationship) {
meta.key = name;
var relationship = relationshipFromMeta(this.store, meta);
relationship.type = typeForRelationshipMeta(this.store, meta);
map.set(name, relationship);
}
});
This seems to show that the type of the object that it belongs to is not being found (Basicgrouping) as it's returning App.undefined.
My theory is it may have something to do when parsing the server response and maybe the payload response. This also happens in other belongTo relationships in my code.
It turns out that there was a file that was overriding some of the DS. methods and causing an empty type to be sent. I was in the process of removing use of the shim but didn't know that it was being used.
Thanks the Bmacs from the ember community for the help debugging the issue.
I have the route /bets with a component to display bets filtered by future dates. The route template also has a link to route /bets/new where the user can add new bets. Each bet has a belongsTo relationship to User.
My problem is that my bets doesn't show up in the component even though I can see in Ember Inspector that the data is loaded. It does show up when I add a new bet through the form in /bets/new though.
My reasoning was that since the data is async, it doesn't load until I request it by pushing a new bet, but I can't get my head around it.
bets.hbs
{{outlet}}
{{#link-to 'bets.new' class="btn btn-default"}}
{{fa-icon "plus"}} New bet
{{/link-to}}
{{#upcoming-bets bets=model.bets}}
{{/upcoming-bets}}
bets.js
import Ember from 'ember';
export default Ember.Route.extend({
model () {
return this.store.findRecord('user', this.get('session.currentUser.uid'));
}
});
upcoming-bets.hbs
<h2>Upcoming bets:</h2>
{{#each upcomingBets as |bet|}}
<div class="bet">
<h3>{{bet.homeTeam}} vs {{bet.awayTeam}}</h3>
<p>
<small>{{moment-format bet.eventDate 'MMMM Do'}}</small>
</p>
<p>
Bet type: {{bet.type}}
</p>
<p>
Bet: {{bet.bet}}
</p>
<p>
Stake: {{bet.stake}}
</p>
<p>
User: {{bet.user}}
</p>
<button class="btn btn-danger" {{action "deleteBet" bet}}>{{fa-icon "trash"}}</button>
</div>
{{else}}
<p>
You don't have any upcoming bets. Maybe {{#link-to 'bets.new'}}add one?{{/link-to}}
</p>
{{/each}}
upcoming-bets.js
import Ember from 'ember';
export default Ember.Component.extend({
upcomingBets: function() {
var today = new Date();
today.setHours(0,0,0,0);
return this.get('bets').filter(function(bet){
return bet.get('eventDate') > today;
});
}.property('bets.#each'),
actions: {
deleteBet: function(bet){
bet.destroyRecord();
}
}
});
new.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
addBet() {
var newBet = this.store.createRecord('bet', {
created: new Date(),
sport: this.get('selectedSport.name'),
league: this.get('league'),
homeTeam: this.get('homeTeam'),
awayTeam: this.get('awayTeam'),
type: this.get('type'),
bet: this.get('bet'),
stake: this.get('stake'),
odds: this.get('odds'),
eventDate: this.get('eventDate'),
});
// Save user as well as bet
var user = this.get('user');
user.get('bets').addObject(newBet);
newBet.save().then(function(){
return user.save();
});
}
}
});
user.js
import DS from 'ember-data';
export default DS.Model.extend({
email: DS.attr('string'),
firstName: DS.attr('string'),
lastName: DS.attr('string'),
bets: DS.hasMany('bet', { async: true })
});
bet.js
import DS from 'ember-data';
export default DS.Model.extend({
created: DS.attr('date'),
sport: DS.attr('string'),
league: DS.attr('string'),
homeTeam: DS.attr('string'),
awayTeam: DS.attr('string'),
type: DS.attr('string'),
bet: DS.attr('string'),
stake: DS.attr('number'),
odds: DS.attr('number'),
eventDate: DS.attr('date'),
win: DS.attr('boolean', {defaultValue: false}),
closed: DS.attr('boolean', {defaultValue: false}),
user: DS.belongsTo('user', { async: true })
});
I appreciate any pointers. Thank you!
Update 22 nov 2016
I've tried making things simpler and more clean by moving the filtering part to a controller as well as making the filter itself simpler by just matching a string. I still have the exact same issue - nothing gets rendered until I add a new bet at which point the filter works as intended and the correct bets show up. I've also had a hard time researching the issue as most examples with filtering out there waits for some sort of action before the filtering is done, for example typing something in an input field. I need the filtering to be done on load.
Here are my updated files:
bets.hbs
{{outlet}}
{{#link-to 'bets.new' class="btn btn-default"}}
{{fa-icon "plus"}} New bet
{{/link-to}}
{{#each upcomingTest as |bet|}}
<p>
{{bet.homeTeam}}
</p>
{{/each}}
controllers/bets.js
import Ember from 'ember';
export default Ember.Controller.extend({
upcomingTest: function() {
var team = 'EXAMPLE';
return this.get('model.bets').filterBy('homeTeam', team);
}.property('model.bets.#each')
});
Update 23 nov 2016
So I think I've proved that the issue has to do with me wanting to filter data that has a relationship to the model and isn't being loaded directly in the route. I tried using the exact same filter on data that I loaded directly in the route and that works great, even directly on load.
I created model Consultation:
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
records: DS.hasMany('record', { async: true }),
currentUser: DS.belongsTo('user'),
remoteUser: DS.belongsTo('user')
});
And also I created model Record:
import DS from 'ember-data';
export default DS.Model.extend({
record_text: DS.attr('string'),
record_poster_id: DS.attr('string'),
record_consultation_id : DS.attr('number'),
consultation: DS.belongsTo('consultation'),
isMine: DS.attr('boolean')
});
At first all consultations load during opening page. And I don't want to load all records of each consultation during opening page. To do this I added async: true but all records loaded simultaneously sending many requests like /consultations/:id/records. After that consultation and records still non-joined. I have next json response for consultation:
{
"consultations":[
{
"id":140721,
"title":"ExpertId: 41217, clientId: 0",
"links":{
"records":"records"
},
"currentUser":41217,
"remoteUser":159984
},
......
]
}
And for records:
{
"records":[
{
"record_id":681952,
"record_consultation_id":140721,
"record_poster_id":0,
"record_text":"1",
},
........
]
}
I think I need to override default serializer. I tried to create serializer for Record:
import DS from 'ember-data';
export default DS.RESTSerializer.extend({
primaryKey: 'record_id',
keyForRelationship: function(key, kind) {
return 'record_consultation_id';
}
});
But it still doesn't work.
Please advise how to join models using links?
UPDATE:
Template
{{#each item in model.records}}
<div class="table message">
{{item.record_text}}
</div>
{{/each}}
I am doing Async (lazy loading) of data using RESTAdaptor and Ember-Data too.
For my links area, i put in the full request URL as follows:
"links":{
"records":"/consultations/140721/records"
},
And using firebug to look at when the request gets sent off, its only when I request for the async content that the AJAX gets fired off.
model.get('records');
Can you provide your Controllers & Template code so I can see how your accessing the Records?