Ember Data - how to findBy with an associated hasMany - ember.js

I have two objects User and Post. A user has many posts and a post belongs to a user.
How do I, within the user controller, use findBy or another method to get to a featured post with the posts array??
Here is how I implemented the UserController; however, the featuredPost computed property is coming back as undefined. Is this best approach? If so, what am I missing?
App.User = DS.Model.extend({
name: DS.attr('string'),
email: DS.attr('string'),
client: DS.belongsTo('App.Client', { async: true }),
posts: DS.hasMany('App.Post', { async: true })
});
App.Post = DS.Model.extend({
client: DS.belongsTo('App.Client', { async: true }),
user: DS.belongsTo('App.User', { async: true }),
title: DS.attr('string'),
body: DS.attr('string'),
isFeatured: DS.attr('boolean')
});
App.UserController = Ember.ObjectController.extend({
needs: ['post'],
posts: (function() {
return Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
content: this.get('content.posts')
});
}).property('content.posts'),
featuredPost: (function() {
return this.get('content.posts').findBy('isFeatured', true)
}).property('content.featuredPost'),
});

Take a look at this: http://emberjs.com/api/#method_computed_filterBy
App.UserController = Ember.ObjectController.extend({
featuredPost: Ember.computed.filterBy('posts', 'isFeatured', true)
});
Also, in
featuredPost: (function() {
return this.get('content.posts').findBy('isFeatured', true);
}).property('content.featuredPost')//should be observing 'posts'
You are basically observing content.featuredPost but from what youve mentioned that property doesnt exist, the property you should be observing is 'posts'. This is a mistake that i made when i was learning ember too, so felt like pointing out. Also using content is optional, you can directly observe the model associated with controller.
Also From doc, findBy seems to return just first item that matches the passed value, not all of them. So to get first match it should be
App.UserController = Ember.ObjectController.extend({
featuredPost: function() {
return this.get('posts').findBy('isFeatured', true);
}.property('posts')//assuming user model hasMany relation to posts
});
Also I would go with the latest version of ember data and make following changes:
App.User = DS.Model.extend({
name: DS.attr('string'),
email: DS.attr('string'),
client: DS.belongsTo('client', { async: true }),
posts: DS.hasMany('post', { async: true })
});
App.Post = DS.Model.extend({
client: DS.belongsTo('client', { async: true }),
user: DS.belongsTo('user', { async: true }),
title: DS.attr('string'),
body: DS.attr('string'),
isFeatured: DS.attr('boolean')
});
This would be good read : https://github.com/emberjs/data/blob/master/TRANSITION.md
And here is a bare minimum working example : http://jsbin.com/disimilu/5/edit
Hope this helps.

Related

Ember - Querying model by properties in a related model

I'm trying query my post model for published posts that have a specific tag. My models look like this:
var Post = DS.Model.extend({
tags: DS.hasMany('tag', { async: true }),
title: DS.attr('string'),
published: DS.attr('boolean'),
});
var Tag = DS.Model.extend({
posts: DS.hasMany('post', { async: true }),
name: DS.attr('string')
});
I've been able to get published posts in my query using the find() method:
this.get('store').find('post', {published: true});
But I don't understand how to query for properties that are part of a related model. I'd appreciate any guidance, thanks!
Edit
I came up with this solution using filter() which seems to work well.
var self = this;
var store = this.get('store');
store.find('post', {published: true}).then(function() {
self.set('content', store.filter('post', function(post) {
return post.get('tag.name') === 'Photography';
}));
});

New model instance with hasMany relationship from form data [duplicate]

I am very new at Ember/ED/EmberFire so apologies if this is a trivial question. I am able to save records to Firebase but I am unable to specify relationships to those records in my controller. I am using
DEBUG: Ember : 1.10.0
DEBUG: Ember Data : 1.0.0-beta.12
DEBUG: Firebase : 2.2.3
DEBUG: EmberFire : 1.4.3
DEBUG: jQuery : 1.11.2
I have a model as such:
var Patient = DS.Model.extend({
lastName: DS.attr('string'),
firstName: DS.attr('string'),
encounters: DS.hasMany('encounter', {async: true})
});
var Encounter = DS.Model.extend({
dateOfEncounter: DS.attr('string'),
patient: DS.belongsTo('patient', {async: true})
});
I am simply trying to specify the patient that my newly created encounter object is associated with. This is my controller:
actions: {
registerEncounter: function() {
var newEncounter = this.store.createRecord('encounter', {
dateOfEncounter: this.get('dateOfEncounter'),
patient: this.store.find('patient', '-Jl8u8Tph_w4PMAXb9H_')
});
newEncounter.save();
this.setProperties({
dateOfEncounter: ''
});
}
}
I can successfully create the encounter record in Firebase, but there is no associated patient property. All I get is
https://github.com/firebase/emberfire/issues/232
this.store.find('patient', '-Jl8u8Tph_w4PMAXb9H_') returns a promise.
Try this:
this.store.find('patient', '-Jl8u8Tph_w4PMAXb9H_').then(function(pat) {
var newEncounter = this.store.createRecord('encounter', {
dateOfEncounter: this.get('dateOfEncounter'),
patient: pat
});
newEncounter.save();
});

Why is "Assertion failed: You can only add a 'story' record to this relationship" is being thrown?

I don't think I understand how to set a belongsTo relationship. I'm using
ember-1.1.2, and ember data beta3. Any help appreciated.
The relationship definitions:
App.Story = DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
setting: DS.attr('string'),
status: DS.attr('string'),
chapters: DS.hasMany('chapter',{async: true}),
cast: DS.hasMany('actor', {async: true})
});
App.Chapter = DS.Model.extend({
name: DS.attr('string'),
number: DS.attr('number'),
description: DS.attr('string'),
story: DS.belongsTo('story'),
scenes: DS.hasMany('scene',{async: true})
});
The routes:
this.resource('story', {path: '/story'}, function() {
this.route('edit', {path: '/:story_id'})
this.route('new')
this.resource('chapter', {path:"/:story_id/chapter"}, function() {
this.route('edit', {path: '/:chapter_id/edit'})
this.route('new')
this.resource('scene', {path:":chapter_id/scene"}, function() {
this.route('edit', {path: '/:scene_id/edit'})
this.route('new')
})
})
})
Where the error occurs:
App.ChapterNewRoute = Ember.Route.extend({
setupController: function( controller, model) {
this.controllerFor('chapter.edit').setProperties({isNew:true, content:model})
},
model: function(params) {
var chapter = this.store.createRecord('chapter')
this.store.find('story', params.story_id).then(function( story) {
chapter.set('story', story) //ERROR HAPPENS HERE
story.get('chapters').push(chapter)
})
return chapter
},
renderTemplate: function() {
this.render('chapter.edit')
}
})
story_id doesn't exist in that route's model hook, it only lives on the ChapterRoute (aka story_id is undefined and you are probably not getting a story). You can use modelFor to get the model from the chapter's route and get the from that model if it exists.
Here's a jsbin showing it working
http://emberjs.jsbin.com/OxIDiVU/1/edit

Ember.js - how to fetch additional record details?

Struggling with populating Ember with data.
I'm using Rails as the backend, and when I hit /contacts.json (ContactsRoute), it returns a list of id, first, last -- works as expected.
However, when visiting a detail view (ContactRoute), I would like to hit /contacts/1.json and fetch details like email address, anniversaries, etc. But since I have a dynamic segment the model hook is skipped and none of the associations are available.
Question: what is the best approach for fetching additional data in a list/detail scenario?
Models:
App.Contact = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
company: DS.attr('string'),
emails: DS.hasMany('App.Email'),
});
App.Email = DS.Model.extend({
contact: DS.belongsTo('App.Contact'),
emailAddress: DS.attr('string'),
});
Route:
App.Router.map(function() {
this.resource('contacts');
this.resource('contact', {path: 'contacts/:contact_id'});
});
App.ContactsRoute = Ember.Route.extend({
init: function() {},
model: function() {
return App.Contact.find();
}
});
App.ContactRoute = Ember.Route.extend({
model: function(params) {
return App.Contact.find(params.contact_id);
}
});
Thanks in advance.
I just posted an answer to a similar problem here: https://stackoverflow.com/a/18553153/1254484
Basically, in your App.ContactRoute, override the setupController method:
setupController: function(controller, model) {
controller.set("model", model);
model.reload();
return;
}
I'm using this with the latest ember-data (commit ef11bff from 2013-08-26).

Ember.js - Cannot render nested models

Have an upcoming weekend project and using it to evaluate Ember.js and I cannot figure out why I cannot display nested objects in my template. This does not work:
{{#each emails}}
{{email_address}}
{{/each}}
When I try just {{emails}} I get a hint that something is right:
Models:
App.Contact = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
company: DS.attr('string'),
emails: DS.hasMany('App.Email')
});
App.Email = DS.Model.extend({
contact: DS.belongsTo('App.Contact'),
emailAddress: DS.attr('string'),
});
Route:
App.Router.map(function() {
this.resource('contacts', function() {
this.resource('contact', {path: ':contact_id'});
});
});
App.ContactsRoute = Ember.Route.extend({
init: function() {},
model: function() {
return App.Contact.find();
}
});
App.ContactRoute = Ember.Route.extend({
model: function(params) {
return App.Contact.find(params.contact_id);
}
});
I have no idea what to try next. I'm using active_model_serializer in Rails. I've tried embedding, side-loading to no avail. I'm sure it's something simple that I'm missing.Thanks in advance!
When using the each helper it's recomendable to be more specific about the items you are looping over to avoid such problems.
Try the following:
{{#each email in model.emails}}
{{email.emailAddress}}
{{/each}}
This should also work:
{{#each emails}}
{{this.emailAddress}}
{{/each}}
And also, your model property is called emailAddress and not email_address.
Hope it helps.