Error _create while rendering belongsTo children in emberjs - ember.js

I'm trying to render mediaitems in my post template, but I'm getting this nasty console error:
Uncaught TypeError: Object photo has no method '_create'
These are my models & fixture data:
/**************************
* Models
**************************/
App.Store = DS.Store.extend({
revision: 11,
adapter: 'DS.FixtureAdapter'
});
App.Mediaitem = DS.Model.extend({
type: DS.attr('string'),
url: DS.attr('string'),
post: DS.belongsTo('App.Post')
});
App.Post = DS.Model.extend({
type: DS.attr('string'),
title: DS.attr('string'),
summary: DS.attr('string'),
body: DS.attr('string'),
date: DS.attr('date'),
mediaitems: DS.hasMany('App.Mediaitem', {embedded:true})
});
App.Post.FIXTURES = [
{
id:"post-one",
type:"news",
title:"First Post",
summary:"Ipsum Lorem",
date:"2013-02-07T16:44:57",
mediaitems:[{
id:593,
post_id:"post-one",
type:'photo',
url:'http://www.google.com'
},
{
id:789,
post_id:"post-one",
type:'photo',
url:'http://www.google.com'
}]
},
{
id:"post-two",
type:"gallery",
title:"Second Post",
summary:"Lorem ipsum",
date:"2013-02-07T16:44:57",
mediaitems:[{
id:342,
post_id:"post-two",
type:'photo',
url:'http://www.google.com'
},
{
id:231,
post_id:"post-two",
type:'photo',
url:'http://www.google.com'
}]
}
];
This is my template code:
<script type="text/x-handlebars" data-template-name="post">
<div class="detail">
{{#linkTo posts}}close{{/linkTo}}<br/>
<h2>{{id}} - {{title}}</h2>
<br/>
{{#each mediaitem in mediaitems}}
print something
{{/each}}
</div>
</script>
Can someone help me out?

The FIXTURE adapter does not support embedded relationships, at least not in rev 11.
You need each model to have its own FIXTURE definition with the record and the relationships to have the id/s of the proper child/parent.
App.Post.FIXTURES = [
{
id:"post-one",
type:"news",
title:"First Post",
summary:"Ipsum Lorem",
date:"2013-02-07T16:44:57",
mediaitems:['593','789']
},
{
id:"post-two",
type:"gallery",
title:"Second Post",
summary:"Lorem ipsum",
date:"2013-02-07T16:44:57",
mediaitems:['342','231']
}];
App.Mediaitems.FIXTURES = [{
id:342,
post_id:"post-two",
type:'photo',
url:'http://www.google.com'
},
{
id:231,
post_id:"post-two",
type:'photo',
url:'http://www.google.com'
},
{
id:593,
post_id:"post-one",
type:'photo',
url:'http://www.google.com'
},
{
id:789,
post_id:"post-one",
type:'photo',
url:'http://www.google.com'
}];

Related

Get data from ember data bind it to a widget in view

I have a router that returns data from the data model.
I want to use this data to bind it to a widget in a view.
Model:
myApp.Unit = DS.Model.extend({
active: DS.attr('boolean'),
allowdecimals: DS.attr('boolean'),
name: DS.attr('string'),
count: DS.attr('number'),
});
Router:
myApp.EunitsRoute = Ember.Route.extend({
model: function() {
return this.store.find('unit');
},
setupController: function(controller, model) {
this._super(controller, model);
controller.set('units', model);
},
actions: { ...
In the view I expect an object formated as follows:
[ {"id": 1,"active": true,"allowdecimals": true,"name": "Pint","count": 8},
{"id": 2,"active": true,"allowdecimals": true,"name": "Each","count": 8},
...]
What I am getting now in the view is an object:<DS.RecordArray:ember400>
View:
var source10 = {
datatype: "array",
datafields: [
{ name: 'id' },
{ name: 'name' },
{ name: 'allowdecimals' },
{ name: 'active' },
{ name: 'count' }
],
localdata: controller.get('units')
};
var dataAdapter10 = new $.jqx.dataAdapter(source10);
$("#eunits_grid").jqxGrid({
pageable: true,
theme: 'energyblue',
autorowheight : true,
rowsheight : 50,
pagesize: 10,
source: dataAdapter10,
....
Template:
<script type="text/x-handlebars" data-template-name="eunits">
<div class="col-md-12">
<h3 class="page-header">Edit Units</h3>
{{#if adding}}
{{view AddnewunitView}}
{{/if}}
{{view UnitsView id='eunits_grid'}}
</div>
</script>

HasMany Polymorphic Relationship In Ember Data

I'm really struggling to understand how polymorphic relationships worm in Ember Data (Beta 11) and cannot find any update information on how to set them up and what is expected in the JSON payload. I'm trying to create a feed of items (think facebook feed) where you have different types of items in the feed. My modeling looks something like the following.
App.Feedable = DS.Model.extend({
activities: DS.hasMany('activity')
});
App.Activity = DS.Model.extend({
feedable: DS.belongsTo('feedable', { polymorphic: true, async: false })
});
App.MemberLikeShare = DS.Model.extend({
status: DS.attr('string')
});
App.PhotoShare = DS.Model.extend({
status: DS.attr('string'),
photo: DS.attr('string')
});
When I do a fetch at /activities I send back JSON that looks like the following:
{
activities: [
{
id: 1,
feedable: { id: 1, type: 'memberLikeShare' }
},
{
id: 4,
feedable: { id: 4, type: 'memberLikeShare' }
},
{
id: 5,
feedable: { id: 5, type: 'photoShare' }
}
],
member_like_shares: [
{
id: 1,
status: 'Foo'
},
{
id: 4,
status: 'Bar'
}
],
photo_shares: [
{id: 5, photo: 'example.jpg'}
]
}
When this runs I get an error like:
You can only add a 'feedable' record to this relationship Error: Assertion Failed: You can only add a 'feedable' record to this relationship
I'm assuming my relationships are wrong or I'm sending the wrong JSON?
polymorphic relationships should extend the base type.
App.Feedable = DS.Model.extend({
activities: DS.hasMany('activity')
});
App.MemberLikeShare = App.Feedable.extend({
status: DS.attr('string')
});
App.PhotoShare = App.Feedable.extend({
status: DS.attr('string'),
photo: DS.attr('string')
});
I'd also expect them to define the activities on them.
member_like_shares: [
{
id: 1,
status: 'Foo',
activites: [1,2,3,4]
},
{
id: 4,
status: 'Bar',
activites: [1,2,3,4]
}
],
photo_shares: [
{
id: 5,
photo: 'example.jpg',
activites: [1,2,3,4]
}
]

How to get List for hasMany relation in Fixture adapter in ember-data

I am new to ember.. I have 2 models..
Music.Artist = DS.Model.extend({
name: DS.attr('string'),
dob : DS.attr('date'),
songs : DS.hasMany('song',{async:true})
});
Music.Artist.FIXTURES=[
{
id:1,
name:'John',
dob:new Date(),
songs:['1','2']
},
{
id:2,
name:'Robbin',
dob:new Date(),
songs:['1','2']
}
];
Music.Song = DS.Model.extend({
title:DS.attr('string'),
artists:DS.hasMany('artist',{async:true})
});
Music.Song.FIXTURES = [
{
id:1,
title:'A day to remember',
artists:[1,2]
},
{
id:2,
title:'Cant live without you',
artists:[1,2]
}
];
I want for url "/songs/id"... I get all the songs that has an artist with the given id.
Music.Router.map(function(){
this.resource('songs',{path:'/songs/:id'});
});
Music.SongsRoute = Ember.Route.extend({
model:function(param){
var artist = this.store.find('artist',param.id);
return artist.get('songs');
}
});
But it returns undefined... How to get the list of songs that are related to the Artist.
Is there any way i can achieve this by using only routes.
How to read the array of songs, if not through get.
Based on the current versions of Ember (1.6.1) and Ember-Data (1.0.0-beta.9), here's how I got your example working. I changed your route naming, I think you really want something like /artists/:artist_id which will list the artist's data, including all his songs.
Your Artist and Song model declarations seem fine, but I declared the fixtures like so:
Music.Artist.reopenClass({
FIXTURES: [
{
id:1,
name:'John',
dob:new Date(),
songs:['1','2']
},
{
id:2,
name:'Robbin',
dob:new Date(),
songs:['1','2']
}
]
});
Music.Song.reopenClass({
FIXTURES: [
{
id:1,
title:'A day to remember',
artists:[1,2]
},
{
id:2,
title:'Cant live without you',
artists:[1,2]
}
]
});
For the router:
Music.Router.map(function() {
this.resource('artists');
this.resource('artist', { path: '/artists/:artist_id' });
});
For the routes:
var Music.ArtistsRoute = Ember.Route.extend({
model: function() {
return this.store.find('artist');
}
});
var Music.ArtistRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('artist', params["artist_id"]);
}
});
For your templates:
// artists.hbs
<ul>
{{#each}}
<li>{{#link-to 'artist' this}}{{name}}{{/link-to}}</li>
{{/each}}
</ul>
// artist.hbs
<h1>{{name}}</h1>
<hr>
<h2>Songs</h2>
<ul>
{{#each songs}}
<li>{{title}}</li>
{{/each}}
</ul>
Hope this helps!

Ember.js RESTAdapter Cannot call method 'then' of undefined

I have a rest adapter:
App.Adapter = DS.RESTAdapter.extend({
bulkCommit: true,
url: 'http://10.0.0.106/bank',
ajax: function (url, type, hash) {
hash.url = url;
hash.type = type;
hash.context = this;
hash.headers = {
'Session-Token': '65f1b8925f8eb2780730a4a2993693699e9a98dad5d2995452c24758d2c59706'
};
if (hash.data && type !== 'GET') {
hash.data = JSON.stringify(hash.data);
}
$.ajax(hash);
}
});
App.Store = DS.Store.extend({
revision: 13,
adapter: App.Adapter
});
A route :
App.UsersRoute = Ember.Route.extend({
model: function() {
return App.User.find();
}
});
A model :
App.User = DS.Model.extend({
firstname: DS.attr("string"),
lastname: DS.attr("string"),
email: DS.attr("string"),
user_id: DS.attr("string"),
role: DS.attr("string"),
phone: DS.attr("string")
});
The request work well and give me that :
{
"error": null,
"payload": {
"bank_users": [{
"firstname": "Ugo",
"lastname": "Doe",
"email": "ugo#doe.com",
"user_id": 1,
"role": "BANK_USER",
"phone": null
}, {
"firstname": "Ugo Clone",
"lastname": "Doe",
"email": "ugo-clone#doe.com",
"user_id": 2,
"role": "BANK_USER",
"phone": null
}
]
}
}
In my template; I've just that :
<h2>this is users !!</h2>
{{#each model}}
{{firstname}}
{{/each}}
And the error is : Uncaught TypeError: Cannot call method 'then' of undefined
This happen in ember-data, here :
findAll: function(store, type, since) {
var root, adapter;
root = this.rootForType(type);
adapter = this;
return this.ajax(this.buildURL(root), "GET",{
data: this.sinceQuery(since)
}).then(function(json) {
adapter.didFindAll(store, type, json);
}).then(null, rejectionHandler);
}
I appears that since is undefined ; What I am doing wrong ? :)
I guess, since you are overriding the RESTAdapter ajax method should the last line
$.ajax(hash);
not rather be?
return $.ajax(hash);
Hope it helps.

Emberjs maximum call stack when displaying hasMany

I'm new to Ember and i have problem with display hasMany relation.
My Models:
App.Shop = DS.Model.extend({
name: DS.attr('string'),
openSettings: DS.hasMany('App.OpenSetting')
});
App.OpenSetting = DS.Model.extend({
title: DS.attr('string'),
data: DS.attr('string'),
shopId: DS.belongsTo('App.Shop')
});
I have mapping:
DS.RESTAdapter.map('App.Shop', {
openSettings: { key: 'openSettings' }
});
DS.RESTAdapter.map('App.OpenSetting', {
shopId: { key: 'shopId' }
});
In index.html in script i have:
{{#each model}}
{{id}} - {{name}} #
{{#each openSettings}}
{{title}}
{{/each}}
{{/each}}
But when object Shop has some relations in openSettings (openSettings:[1,2]) then i get error:
Uncaught RangeError: Maximum call stack size exceeded
What i'm doing wrong?
Fixtures:
App.Shop.FIXTURES = [
{
name: "Supermarket",
id: 2,
openSettings: [
2, 5
]
}
];
App.OpenSetting.FIXTURES = [
{
title: "monday - friday",
data: "8:00 - 24:00",
id: 2,
shopId: 2
},
{
title: "saturday",
data: "8:00 - 1:00",
id: 5,
shopId: 2
}
];
Thanks for help.
Ember throws that error when field is named "data". After change, all works fine.