Is there a way to delegate all calls to App.Item to App.Book, so that i can do App.Book.name and it returns the value of App.Item.name and thesame for App.Book.position. Simply put a way to delegate all the attributes of App.Item to App.Book, imagine a scenario where App.Item has 10 - 12 attributes.
App.Item = DS.Model.extend({
name: DS.attr('string', { defaultValue: "foo" })
position: DS.attr('string')
});
App.Book = DS.Model.extend({
category: DS.attr('string')
});
Related
Questions:
This line of code _activeAuthor.get('books').pushObject(book).save(); is processed without error in Chrome but the book is not added to the books property of the _activeAuthor instance of Ember-Data. I don't understand why?
The below code add the created Book to the Book property of the Chapter instance (see comment). It is a one-to-many relationship (see de Models). Ember-Data seems to automatically populate the related record on the Book instance. Is this a normal behaviour of Ember-Data? Should I let Ember-Data populate the related side of a relationship one-to-many or should I specify both sides and persist both instances?
I suspect that one of the issue of the below code is that the I do not handle promises properly. This code: this.modelFor('user').get('latestChapter'); seems to return a promise. How should I handle promisses with get()?
Code:
createChapter: function() {
//Getting the Author of the latestChapter or getting the first Author in the array
var _activeAuthor = null;
var authors = this.modelFor('user').get('authors').toArray();
var latestChapter = this.modelFor('user').get('latestChapter');
var latestAuthor = latestChapter.get('author');
if (latestChapter.content) {
_activeAuthor = latestAuthor;
} else {
_activeAuthor= authors[0];
}
var book = this.store.createRecord('book', {
title: 'click here to name your book',
author: _activeAuthor,
});
var chapter = this.store.createRecord('chapter', {
title: 'Click here to name your chapter',
book: book, // Add the created Book to the Book property of the Chapter instance
});
_activeAuthor.get('books').pushObject(book).save();
chapter.save();
book.save();
this.modelFor('user').set('latestChapter', chapter).save() //Identifying the latest created chapter at the lastestChapter;
console.log('New chapter created: ' + chapter.get('id'));
},
Models:
App.Author = DS.Model.extend({
type: DS.attr('string'),
authorTitle: DS.attr('string'),
userTitle: DS.attr('string'),
description: DS.attr('string'),
user: DS.belongsTo('user', {inverse: 'authors', async: true}),
books: DS.hasMany('book', { inverse: 'author', async: true}),
});
App.Book = DS.Model.extend({
title: DS.attr('string'),
icon: DS.attr('string'),
description: DS.attr('string'),
frequency: DS.attr('string'),
chapters: DS.hasMany('chapter', { inverse: 'book', async: true}),
author: DS.belongsTo('author', { inverse: 'books', async: true}),
});
App.Chapter = DS.Model.extend({
title: DS.attr('string'),
description: DS.attr('string'),
frequency: DS.attr('string'),
unit: DS.attr('string'),
aggregationMode: DS.attr('string'),
dashboard: DS.attr('boolean'),
statData : DS.attr('array'),
book: DS.belongsTo('book', { inverse: 'chapters', async: true}),
});
Thanks!
1.
author.get('books') will return a promise, so probably what you want to do is
author.get('books').then(function(books) {
books.pushObject(book)
});
author.save();
If this is not an issue, could you give a jsfiddle with the whole app code? Then, it'll be easier to help! :)
2.
Every time you get a model's property that is async and is not isLoaded (not synced with server), ember will ask the server and yes, will populate the records in your store which is a desired behaviour :)
3.
If you have an async model property, then you always get a promise, so you should handle it in for example this way:
chapter.get('book').then(function(book) {
// here's a book
});
BTW var latestAuthor = latestChapter.get('author'); -> chapter doesn't have author property :)
I am getting this error:
ArrayProxy expects an Array or Ember.ArrayProxy, but you passed object
I am getting my data from a rails application using active-model-serializers. The data is showing in mhy ember inspector but my template is not rendering properly with this error in the console.
Router.map(function() {
this.resource('brands', function() {
this.resource('brand', { path: '/:brand_id' });
});
this.resource('campaigns', function() {
this.resource('campaign', { path: '/:campaign_id' },
this.resource('index'), { path: 'brands/:brand_id' });
});
});
export default Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
brand: this.store.find('brand'),
campaign: this.store.find('campaign')
});
}
});
export default DS.Model.extend({
name: DS.attr('string'),
facebook_page_id: DS.attr('string'),
active: DS.attr('boolean'),
facebook_uid: DS.attr('string'),
facebook_token: DS.attr('string'),
facebook_token_expires: DS.attr('string'),
website_url: DS.attr('string'),
privacy_policy_link: DS.attr('string'),
terms_link: DS.attr('string'),
instagram_account: DS.attr('string'),
instagram_url: DS.attr('string'),
twitter_account: DS.attr('string'),
twitter_url: DS.attr('string'),
avatar_url: DS.attr('string'),
youtube_account: DS.attr('string'),
youtube_url: DS.attr('string'),
favicon_url: DS.attr('string'),
open_graph_url: DS.attr('string'),
campaigns: DS.hasMany('campaign', {async: true})
});
export default DS.Model.extend({
name: DS.attr('string'),
brand_id: DS.attr('string'),
brand: DS.belongsTo('brand', {async: true})
});
{{#each brand in controller}}
<a>
{{#link-to 'brand' this}}
{{brand.name}}
{{/link-to}}
</a>
{{else}}
<a>No brands found.</a>
{{/each}}
No errors in the server logs.
Embers default index controllers are ArrayControllers that expect their model to be an array.
In the model hook of - what appears to be - your BrandsIndexRoute you specified the model as
Ember.RSVP.hash({
brand: this.store.find('brand'),
campaign: this.store.find('campaign')
});
Which returns a single object, not an array of brands as is expected.
What you should do instead is something like:
//brands route
export default Ember.Route.extend({
model: function() {
return this.store.find('brand');
}
});
//campaigns route
export default Ember.Route.extend({
model: function() {
return this.store.find('campaign');
}
});
You're trying to iterate over the controller, but your controller is decorating a object with two properties on it, not an array. Your object looks like this:
{
brand: [...],
campaign: [...]
}
Additionally if you have a controller defined as an array controller it will throw this error (which is what I'm guessing is really happening). Because you're passing an object to your controller, instead of an array.
I am having a terrible time with this, but I have the following action on a controller:
saveOrganization: function() {
var org = this.get('model');
var users = org.get('users').then(function() {
console.log(org); //users are a part of org
org.save(); //users are not sent to server
});
}
and associated organization model:
export default DS.Model.extend({
createdAt: DS.attr('date'),
updatedAt: DS.attr('date'),
name: DS.attr('string'),
address: DS.attr('string'),
city: DS.attr('string'),
state: DS.attr('string'),
zip: DS.attr('string'),
users: DS.hasMany('user',{async:true}),
totalUsers: function() {
return this.get('users').get('length');
}.property('users.#each')
});
and associated users model:
export default DS.Model.extend({
createdAt: DS.attr('date'),
updatedAt: DS.attr('date'),
name: DS.attr('string'),
email: DS.attr('string'),
bio: DS.attr('string'),
picture: DS.attr('string'),
organization: DS.belongsTo('organization'),
type: DS.attr('string'),
username: DS.attr('string'),
password: DS.attr('string')
});
As you can see from the comments, when I get the users array as part of the organization, I can see the data, but when I save it, ember data never sends the users array as part of the data sent to the server.
Can anyone help me figure out what might be going on?
Thanks.
Stack over flow won't let me mark this as a dupe of Serialize ids when saving emberjs model, but it really is. Ember Data is stupid in this aspect, if it's a ManyToOne relationship, it only includes the id from the belongsTo side.
https://github.com/emberjs/data/commit/7f752ad15eb9b9454e3da3f4e0b8c487cdc70ff0#commitcomment-4923439
App.ApplicationSerializer = DS.RESTSerializer.extend({
serializeHasMany: function(record, json, relationship) {
var key = relationship.key;
var payloadKey = this.keyForRelationship ? this.keyForRelationship(key, "hasMany") : key;
var relationshipType = RelationshipChange.determineRelationshipType(record.constructor, relationship);
if (relationshipType === 'manyToNone' || relationshipType === 'manyToMany'
|| relationshipType === 'manyToOne') { // This is the change
json[payloadKey] = get(record, key).mapBy('id');
// TODO support for polymorphic manyToNone and manyToMany relationships
}
},
});
I'm trying to set up the attributes to my model but having trouble when nesting objects. Here is what I have
App.Posts = DS.Model.extend({
title: DS.attr('string'),
author: {
name: DS.attr('string')
},
date: DS.attr('date'),
excerpt: DS.attr('string'),
body: DS.attr('string')
});
How am I suppose to declare the author object?
In the ember inspector when I go under data and under App.post and select one of the rows. It has a property a property App.Post with an attribute author: { name: [Object] }
here is the JS Bin link http://jsbin.com/tesozepexaqi/2/
Ember works perfectly fine without Ember Data. Let's pretend we want to do it with Ember Data:
Ember Data's Records should be flat. This means all properties are at the top level. If you have a related data that exist deeper they generally live in a different record. If you're attempting to embed the record you'll need to look into the tricky world of embedded records (Ember-data embedded records current state?). At the very least these related records must have an id defined. So here's an example of what the data returned from server should look like.
{
posts:[
{
id: '1',
title: 'My name is Django.',
author: {
id:1,
name: 'D name'
},
date: new Date('08-15-2014'),
excerpt: 'The D is silent.',
body: 'The D is silent.'
},
{
id: '2',
title: 'White horse',
author: {
id:2,
name: 'horse name'
},
date: new Date('08-15-2014'),
excerpt: 'Is what I ride.',
body: 'My horse likes to dance.'
}
]
}
Code
App.ApplicationAdapter = DS.RESTAdapter.extend();
App.PostSerializer = DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
attrs: {
author: {embedded: 'always'}
}
});
App.Post = DS.Model.extend({
title: DS.attr('string'),
author: DS.belongsTo('author'),
date: DS.attr('date'),
excerpt: DS.attr('string'),
body: DS.attr('string')
});
App.Author = DS.Model.extend({
name: DS.attr()
});
Example: http://jsbin.com/vazada/1/edit
One other small tip, you'll not want to use globals when working with the routes, you can use modelFor to get the model from a different route.
App.PostsRoute = Ember.Route.extend({
model: function() {
return this.store.find('post');
}
});
App.PostRoute = Ember.Route.extend({
model: function(params) {
var posts = this.modelFor('posts');
return posts.findBy('id', params.post_id);
}
});
Personally, I think Ember Data is overkill. Ember works perfectly well with POJOs. If you need caching and the ability to rollback then Ember Data might be a good solution for you.
Example: http://jsbin.com/vazada/2/edit
Adjusting this example from the Ember docs like the below should work:
App.Post = DS.Model.extend({
title: DS.attr('string'),
author: DS.belongsTo('author'),
date: DS.attr('date'),
excerpt: DS.attr('string'),
body: DS.attr('string')
});
App.Author = DS.Model.extend({
post: DS.belongsTo('post')
})
I would get the records of my field children. Here the code:
App.User = DS.Model.extend({
name: DS.attr('string'),
online: DS.attr('boolean')
});
App.List = DS.Model.extend({
name: DS.attr('string'),
children: DS.hasMany('App.User'),
online: function() {
var users = this.get("children");
return users.reduce(0, function(previousValue, user){ // no record founds
return previousValue + user.get("online");
});
}.property("children.#each.online")
});
But App.List.find(1).get('online') returns no record. (For some reason I cannot specify that App.List.children contains many records, of type App.Users, as embedded records).
Here is the fiddle: JSBIN and it's output
How I can solve my issue?
Define the embedded Model on your Adapter map:
App.List = DS.Model.extend({
name: DS.attr('string'),
users: DS.hasMany('App.User'), //use "users" as the property name to mantain ember's naming conventions
...
});
App.Adapter = DS.RESTAdapter.extend();
App.Adapter.map('App.List', {
users: {embedded: 'always'} //you can use `always` or `load` which is lazy loading.
});
App.Store = DS.Store.extend({
revision: 12,
adapter: App.Adapter.create()
});
Hope it helps