I'm having a ton of trouble with updating a model in my Ember application. I can't seem to find good documentation that describes how to update my app. The following code is what I'm trying. This sends an update to /playlists/:playlist_id, unfortunately it doesn't send the updated songs as well... is there some callback for pushObject that I can't find? Am I trying trying to save the wrong thing?
App.PlaylistIndexController = Ember.ObjectController.extend({
actions: {
addSong: function(song) {
songs = this.get('songs');
songs.pushObject(song);
this.get('model').save();
}
}
});
App.Playlist = DS.Model.extend({
name: DS.attr('string'),
songs: DS.hasMany('song'),
});
App.Song = DS.Model.extend({
name: DS.attr('string'),
artist: DS.attr('string'),
playlist: DS.belongsTo('playlist'),
});
Related
-------------------------------
Ember : 1.13.11
Ember Data : 1.13.15
Firebase : 2.3.2
EmberFire : 1.6.3
jQuery : 1.11.3
-------------------------------
I've got two endpoints in my firebase app. /employees and /subjects. In my ember app I want to add subjects to an employee (employees/$id/subjects). The problem is, I don't know how to load all my subjects from /subjects so I can add them to my array.
This is my routes:
Router.map(function() {
this.route('dashboard');
this.route('employees', function() {
this.route('employee', { path: '/:id'});
});
});
And this is my model
export default Ember.Route.extend({
model(params) {
return this.store.findRecord('employee', params.id);
}
});
I've tried various things to get this to work, creating a subroute this.route(employee, function(){ this.route('subjects') }, loading a second model in my employee model, none of which has worked. I'm new to ember so I might have gotten some things mixed up. Any helps is appreciated.
EDIT
Employee model
export default DS.Model.extend({
name: DS.attr('string'),
position: DS.attr('string'),
accessoryPosition: DS.attr('string'),
education: DS.attr('string'),
experience: DS.attr('string'),
imgUrl: DS.attr('string'),
subjects: DS.hasMany('subject', {async: true})
});
Subject Model
export default DS.Model.extend({
name: DS.attr('string')
});
To maybe describe my intentions a bit better, here is the flow I want:
User selects an employee, employees info is shown along with a list of subjects assigned to that employee. But I also need the full list of subjects available, if I want to assign a new subject to an employee. Hence my question. Hope this makes sense
Okay, then you can do this in your Route:
export default Ember.Route.extend({
model(params) {
return Ember.RSVP.hash({
employee: this.store.findRecord('employee', params.id),
subjects: this.store.findAll('subject')
});
}
});
then in your template:
{{#each employee.subjects as |subject|}}
{{!these are your employee subjects}}
{{subject.name}}
{{/each}}
{{#each subjects as |subject|}}
{{!these are all your subjects}}
{{subject.name}}
{{/each}}
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 was wondering if you can side-load a hasMany relationship in ember-data - hooked on a non-id column. Here are my code snippets-
App.Profile = DS.Model.extend({
firstName: DS.attr(),
lastName: DS.attr(),
photo: DS.hasMany('photo', {async:true})
});
App.Photo = DS.Model.extend({
path: DS.attr('string'),
title: DS.attr('string'),
owner: DS.belongsTo('user', {async:true}),
});
App.ProfileSerializer = DS.RESTSerializer.extend({
attrs:{
photo: {embedded: 'load'}
},
});
The JSON returned by localhost:/api/profiles/ is:
[
{
"photos": [
"media/pic3.jpeg",
"media/pic4.jpeg"
],
"id": "5441b6b2bc8ae304d4e6c10e",
"first_name": "Dave",
"last_name": "Gordon",
"profile_pic": "media/profilePic.jpg",
"member_since": "2014-01-03T00:00:00",
"membership": "Silver",
"theme_pic": "media/profilePic.jpg"
}
]
As we see here, I am trying to hook up photos using 'path' field of photo instead of id of photos. I can't seem to get ember to send an async call. Is it possible to tell ember to make an async call based off of an non-id field. I feel there should be a way coz I intend to send an async call based off of a custom generated key. ANy help is greatly appreciated. Thank You
I wouldn't think of that as an association, but rather just another property with a type of array.
You should be able to just change your model like this:
App.Profile = DS.Model.extend({
firstName: DS.attr(),
lastName: DS.attr(),
photos: DS.attr()
});
Then you should be able to access the property as an array (possible object) in your template.
If necessary, you might need to create a custom transform like this:
App.ArrayTransform = DS.Transform.extend({
deserialize:function(value) {
return value;
}
});
Then you can do:
App.Profile = DS.Model.extend({
firstName: DS.attr(),
lastName: DS.attr(),
photos: DS.attr('array')
});
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