I'm trying to parse a json dataset in my ember data models but this throws an error in het console:
Uncaught TypeError: Cannot call method '_create' of undefined
DS.Store.Ember.Object.extend.materializeRecord
DS.Store.Ember.Object.extend.findByClientId
What am I doing wrong here?
This is the data I receive from the server:
{
"newsitems": [
{
"date": "2013-02-10T15:00:00+01:00",
"id": "1",
"images": [
{
"id": "1",
"value": "image.JPG"
},
{
"id": "3",
"value": "anotherimage.jpg"
}
],
"slug": "some-slug",
"summary": "some summary",
"text": "some text",
"thumb": {
"id": "2",
"value": "someimage.JPG"
},
"title": "Some title",
"type": "1",
"videos": [
{
"id": "AEOpX8tmiUI",
"value": "AEOpX8tmiUI"
},
{
"id": "kxopViU98Xo",
"value": "kxopViU98Xo"
}
]
}
]
}
These are my models:
App.NewsitemThumb = DS.Model.extend({
value: DS.attr('string'),
newsitem: DS.belongsTo('App.Newsitem')
});
App.NewsitemImage = DS.Model.extend({
value: DS.attr('string'),
newsitem: DS.belongsTo('App.Newsitem')
});
App.NewsitemVideo = DS.Model.extend({
value: DS.attr('string'),
newsitem: DS.belongsTo('App.Newsitem')
});
App.Newsitem = DS.Model.extend({
slug: DS.attr('string'),
type: DS.attr('string'),
title: DS.attr('string'),
summary: DS.attr('string'),
text: DS.attr('string'),
date: DS.attr('date'),
thumb: DS.belongsTo('App.NewsitemThumb'),
images: DS.hasMany('App.NewsitemImage'),
videos: DS.hasMany('App.NewsitemVideo')
});
For the record, any suggestions for optimizing these models are welcome. It feels so weird to make 3 models for video, images and a thumb.
According to this issue, this error pops up when you don't specify an explicit mapping for a hasMany relationship in your adapter.
Try defining your store as
App.Store = DS.Store.extend({
revision: 11,
adapter: DS.RESTAdapter.extend({
serializer: DS.RESTSerializer.extend({
init: function() {
this._super();
this.map("App.Newsitem", {
images: { embedded: "load" },
videos: { embedded: "load" }
});
}
})
})
});
Related
I am trying to display a model's relationships in a template from sideloaded data, but there seems to be some problem. With Ember Inspector, I see that the relationships are correctly loaded from the data. However, the data is not displayed on the page.
Looking for solutions or suggestions on where to start debugging. Much appreciated.
Handlebars:
<dt>Categories</dt>
<dd>
<ul>
{{#each model.categories as |category| }}
<li>{{ category.name }}</li>
{{/each}}
</ul>
</dd>
The route:
export default Ember.Route.extend(AuthenticatedRouteMixin, {
model(params) {
return this.store.findRecord('datasheet', params.id);
}
});
The models:
// app/models/datasheet.js
export default DS.Model.extend({
name: DS.attr('string'),
name_en: DS.attr('string'),
news: DS.attr('string'),
news_en: DS.attr('string'),
basic_information: DS.attr('string'),
basic_information_en: DS.attr('string'),
id_gradient_default: DS.attr('string'),
icon_name: DS.attr('string'),
icon_color: DS.attr('string'),
order: DS.attr('string'),
item_count: DS.attr('string'),
categories: DS.hasMany('category')
});
// app/models/category.js
export default DS.Model.extend({
name: DS.attr('string')
});
This is the JSON returned from the adapter method:
{
"data": {
"type": "datasheet",
"id": "21",
"attributes": {
"name": "Projekty",
"name_en": "Projects",
"news": "",
"news_en": "",
"basic_information": "",
"basic_information_en": "",
"id_gradient_default": "27",
"icon_name": "pin_flag",
"icon_color": "",
"order": "14"
},
"relationships": {
"categories": ["18", "19", "20", "51", "52"]
}
},
"included": [{
"type": "category",
"id": "18",
"attributes": {
"name": "Project"
}
}, {
"type": "category",
"id": "19",
"attributes": {
"name": "Activity"
}
}, {
"type": "category",
"id": "20",
"attributes": {
"name": "Project phase"
}
}, {
"type": "category",
"id": "51",
"attributes": {
"name": "Program"
}
}, {
"type": "category",
"id": "52",
"attributes": {
"name": "Milestone"
}
}]
}
Ember Inspector screenshot:
This is not correct JSONAPI:
"relationships": {
"categories": ["18", "19", "20", "51", "52"]
}
This is the correct JSONAPI equivalent:
"relationships": {
"categories": {
data: [{
id: '18',
type: 'category'
},{
id: '19',
type: 'category'
},{
id: '20',
type: 'category'
},{
id: '51',
type: 'category'
},{
id: '52',
type: 'category'
}]
}
}
So your data are loaded but not correctly linked. you can see this in the ember-inspector when you check the categories relationship.
In my Ember app, a survey belongsTo a user; a user hasMany surveys. In my template, I would like to display a list of surveys, and the name of the user that created them. For now, I am pushing side-loaded data into the store via the application route, and it is showing up in the ember inspector->Data. The survey info is displaying correctly in the template, but the corresponding user's firstName will not appear. Help/guidance appreciated.
survey.js (model)
import DS from 'ember-data';
export default DS.Model.extend({
user: DS.belongsTo('user', {async: true}), //tried without async as well
title: DS.attr(),
post: DS.attr()
});
user.js (model)
import DS from 'ember-data';
export default DS.Model.extend({
surveys: DS.hasMany('survey', {async: true}),
firstName: DS.attr()
});
application.js (application route)
export default Ember.Route.extend({
model() {
this.store.push({
data: [{
id: 1,
type: 'survey',
attributes: {
title: 'My First Survey',
post: 'This is my Survey!'
},
relationships: {
user: 1
}
}, {
id: 2,
type: 'survey',
attributes: {
title: 'My Second Survey',
post: 'This is survey 2!'
},
relationships: {
user: 1
}
}, {
id: 1,
type: 'user',
attributes: {
firstName: 'Tyler'
},
relationships: {
surveys: [1, 2]
}
}]
});
}
});
surveys.js (route)
export default Ember.Route.extend({
model () {
return this.store.findAll('survey');
}
});
surveys.hbs (template)
<ul>
{{#each model as |survey|}}
<li>
<strong>{{survey.title}}</strong> //This works
<br>
{{survey.post}} //This works
<br>
Author: {{survey.user.firstName}} //This does not work
</li>
{{/each}}
</ul>
SOLUTION - updated application.js
export default Ember.Route.extend({
model() {
this.store.push({
"data": [ //Added double quotes throughout to conform to documentation
{
"id": "1",
"type": "survey",
"attributes": {
"title": "My First Survey",
"post": "This is my Survey!"
},
"relationships": {
"user": {
"data": {
"id": "1",
"type": "user"
}
}
}
}, {
"id": "2",
"type": "survey",
"attributes": {
"title": "My Second Survey",
"post": "This is survey 2!"
},
"relationships": {
"user": {
"data": {
"id": "1",
"type": "user"
}
}
}
}
],
"included": [
{
"id": "1",
"type": "user",
"attributes": {
"firstName": "Tyler"
} //no need to include user's relationships here
}
]
});
}
});
Payload relationship part is not correct. Should be:
relationships: {
user: {
data: {
id: 1,
type: 'user'
}
}
}
Also I think "user" payload should be in "included" section.
JSONAPISerializer api
I'm using ember-data:
// Version: v1.0.0-beta.3-2-ga01195b
// Last commit: a01195b (2013-10-01 19:41:06 -0700)
var App = Ember.Application.create();
App.Router.map(function() {
this.resource("main");
});
Using a namespace:
App.ApplicationAdapter = DS.RESTAdapter.extend({
namespace: 'api'
});
The Ember model:
App.Article = DS.Model.extend({
title: DS.attr('string'),
desc: DS.attr('string')
});
The route looks like this:
App.MainRoute = Ember.Route.extend({
model: function() {
console.log(this.store.find('article')); // isRejected: true, reason: Object has no method 'eachTransformedAttribute'
this.store.find('article').then(function(results){console.log(results)}); //nothing
}
});
Here is the data:
{
"articles": [{
"_id": "5266057ee074693175000001",
"__v": 0,
"createdAt": "2013-10-22T04:56:30.631Z",
"desc": "testing, testing",
"title": "Basic",
"id": "5266057ee074693175000001"
}, {
"_id": "5266057ee074693175000002",
"__v": 0,
"createdAt": "2013-10-22T04:56:30.636Z",
"desc": "testing, testing",
"title": "Basic2",
"id": "5266057ee074693175000002"
}, {
"_id": "5266057ee074693175000003",
"__v": 0,
"createdAt": "2013-10-22T04:56:30.636Z",
"desc": "testing, testing",
"title": "Basic3",
"id": "5266057ee074693175000003"
}, {
"_id": "5266057ee074693175000004",
"__v": 0,
"createdAt": "2013-10-22T04:56:30.636Z",
"desc": "testing, testing",
"title": "Basic4",
"id": "5266057ee074693175000004"
}]
}
I am using ember-tools to manage the project build.
The issue is with ember-tools default build placing the Model definition after the Route.
UPDATED: This is because I manually created the Article model without using a generator. (I've since used the generator and the order is created correctly)
I've fixed it by manually updated the built: application.js from this:
App.MainRoute = Ember.Route.extend({
model: function() {
return this.store.find('document');
}
});
App.Article = DS.Model.extend({
title: DS.attr('string'),
file: DS.attr('string')
});
to this:
App.Article = DS.Model.extend({
title: DS.attr('string'),
file: DS.attr('string')
});
App.MainRoute = Ember.Route.extend({
model: function() {
return this.store.find('document');
}
});
I resolved this by inspecting a working app, and found that within the JSONSerializer applyTransforms() type was referencing a different type:
It should be the namespace model Class like this:
I'm getting this error when trying to load a set of records through a restful api. It works with ember-model but when I switch to ember-data (beta 2) and ember.js (1.0), I get this error.
Assertion failed: No model was found for '0'
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: 'http://localhost:8080',
namespace: 'api'
});
App.Router.map(function() {
this.resource('about');
this.resource('pages', function() {
this.resource('page', { path: ':page_id' });
});
this.resource('login');
});
App.AuthenticatedRoute = Ember.Route.extend({
actions: {
error: function(reason, transition) {
if (reason.status == 403) {
alert('You must login');
this.transitionTo('login');
}
else {
//alert('non 403 error:'+reason.status);
this.transitionTo('login');
}
}
}
});
App.PagesRoute = Ember.Route.extend({
model: function() {
return this.store.find('page');
}
});
App.PageRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('page', params.page_id);
}
});
App.Page = DS.Model.extend({
user: DS.attr('string'),
slug: DS.attr('string'),
zcontent: DS.attr(),
title: DS.attr('string'),
create_time: DS.attr('date'),
update_time: DS.attr('date')
});
Here is what the backend returned:
{
"pages": [
{
"update_time": "2013-01-14 19:59:35.744855",
"title": "",
"id": 38,
"create_time": "2012-08-04 15:08:16",
"user": "robert-jones",
"slug": "orange"
},
{
"update_time": "2013-01-14 19:59:35.899830",
"title": "",
"id": 47,
"create_time": "2012-08-03 10:04:07",
"user": "robert-jones",
"slug": "REVIEWStheraputics"
},
{
"update_time": "2012-12-18 07:16:13.656509",
"title": "'Notes on Temperature Heat Map'",
"id": 17,
"create_time": "2012-12-18 07:14:48.118119",
"user": "robert-jones",
"slug": "50612c27b94ca650"
},
{
"update_time": "2012-12-12 19:48:08.079021",
"title": "'Notes on Dyanmic Heat Map'",
"id": 8,
"create_time": "2012-12-12 19:48:08.013336",
"user": "robert-jones",
"slug": "c5642b4c14d901cf"
}
]
}
I've run into this before when my server was just returning a raw array instead of an object with a root element. That is, instead of this:
{pages : [...]}
I was accidentally returning this:
[...]
Kind of hard to say without a JSBin to look at.
I can't figure out how to output properties from related models into views. Models are defined like this:
Club Model
App.Club = DS.Model.extend({
name: DS.attr('string'),
slug: DS.attr('string'),
... // Rest of omitted attributes
province: DS.belongsTo('App.Province'),
city: DS.belongsTo('App.City'),
servicetable: DS.belongsTo('App.Servicetable'),
timetable: DS.belongsTo('App.Timetable'),
pricetable: DS.belongsTo('App.Pricetable')
});
Servicetable Model, which belongs to Club
App.Servicetable = DS.Model.extend({
labels: {
parking: 'Parking',
bikeParking: 'Aparcamiento para bicicletas',
shower: 'Duchas',
materialRenting: 'Alquiler de Material',
restaurantCoffeeshop: 'Restaurante/Cafetería',
shop: 'Tienda',
playschool: 'Guardería',
locker: 'Taquillas',
handicapped: 'Acceso minusválidos',
sauna: 'Sauna',
wifi: 'WiFi'
},
parking: DS.attr('boolean'),
bikeParking: DS.attr('boolean'),
shower: DS.attr('boolean'),
materialRenting: DS.attr('boolean'),
restaurantCoffeeshop: DS.attr('boolean'),
shop: DS.attr('boolean'),
playschool: DS.attr('boolean'),
locker: DS.attr('boolean'),
handicapped: DS.attr('boolean'),
sauna: DS.attr('boolean'),
wifi: DS.attr('boolean'),
club: DS.belongsTo('App.Club')
});
Now, the output for api/clubs/2 is the following. Note that servicetable is being sideloaded to reduce number of requests:
{
"club": {
"id": "2",
"name": "Club de P\u00e1del y Tenis Fuencarral",
"slug": "club-de-padel-y-tenis-fuencarral",
... // Rest of omitted attributes
},
"servicetable": {
"id": "2",
"club_id": "2",
"parking": "1",
"bike_parking": "0",
"shower": "1",
"material_renting": "1",
"restaurant_coffeeshop": "1",
"shop": "1",
"playschool": "0",
"locker": "0",
"handicapped": "0",
"sauna": "0",
"wifi": "0"
}
}
Finally, route and template:
App.ClubGeneralInfoRoute = Em.Route.extend({
setupController: function(controller) {
controller.set('content', App.Club.find(App.clubId));
}
});
<script type="text/x-handlebars" data-template-name="club/general-info">
<h1>Club Info</h1>
<label>Parking</label>
{{view Ember.Checkbox checkedBinding="content.servicetable.parking"}}
</script>
So when I load the page, I can see the template rendering as the <h1> is appearing, but the properties of Servicetable not.
Note that if I try to render direct Club attributes like name or slug in this template, they are working too.
Any suggestions?
If you're sideloading, you need to configure your adapter to do so.
DS.RESTAdapter.configure('App.Servicetable', {
sideloadAs: 'servicetables'
});
Next, you need to include the servicetable id in the club's json:
"club": {
"id": "2",
"servicetable_id": 2,
... // Rest of attributes
}
When you side load records, pass them as an array, and set the key in plural form:
"servicetables": [{
"id": "2",
... // Rest of attributes
}]
Finally, the complete json response should look like this:
{
"club": {
"id": "2",
"servicetable_id": 2,
"name": "Club de P\u00e1del y Tenis Fuencarral",
"slug": "club-de-padel-y-tenis-fuencarral",
... // Rest of attributes
},
"servicetables": [{
"id": "2",
"club_id": "2",
"parking": "1",
... // Rest of attributes
}]
}