Ember: how to show related data (Ember data) in handlebars syntax? - ember.js

See http://jsfiddle.net/cyclomarc/VXT53/6/
I have data in the form of:
publication: {
id: '1',
title: 'first title',
bodytext: 'first body',
author: {
id: '100',
name: 'Jan'
}
},
I want to show in the hbs part the author name. In the publications hbs (showing each publication), I use the following syntax, but that does not work:
{{publication.author.name}}
In the publications/edit hbs (edit of one publication after selection in publications), I use the following syntax, but that does not work:
{{author.name}}
How should I access the embedded data ?

First of, your working fiddle, sorry I ported it to jsbin since I like it more but this does not affect the functionality in any way: http://jsbin.com/ifukev/2/edit
Now to what I've changed, basically what I've done is to define that a App.Author has many publications and a App.Publication belongs to a App.Author and completed the respective FIXTURES:
App.Author = DS.Model.extend({
name: DS.attr('string'),
publications: DS.hasMany('App.Publication'),
didLoad: function () {
console.log('Author model loaded', this);
}
});
App.Publication = DS.Model.extend({
title: DS.attr('string'),
bodytext: DS.attr('string'),
author: DS.belongsTo('App.Author'),
didLoad: function () {
console.log('Publication model loaded', this);
}
});
//FIXTURES DATA
App.Publication.FIXTURES = [
{
id: '1',
title: 'first title',
bodytext: 'first body',
author: 100
},
{
id: '2',
title: 'second title',
bodytext: 'second post',
author: 300
}
];
App.Author.FIXTURES = [
{
id: '300',
name: 'Marc',
publications: [2]
},
{
id: '100',
name: 'Jan',
publications: [1]
}
];
Hope it helps.

Related

How to load dependencies in Ember Data

I have an application, with 2 models: Team and User. Each team has many users, and only 1 Team Leader. On the Index view for Teams, I want to display the list of Teams, and the name of the Team leader. I can't get the name of the team leader to be displayed. Not sure what's wrong.
User Model:
export default Model.extend({
firstName: attr(),
lastName: attr(),
team: belongsTo('team', { inverse: 'users' }),
fullName: Ember.computed('firstName', 'lastName', function() {
return `${this.get('firstName')} ${this.get('lastName')}`;
})
});
Team Model:
export default Model.extend(Validations, {
name: attr(),
shortName: attr(),
description: attr(),
teamLeader: belongsTo('user', { inverse: null }),
users: hasMany('user'),
specialisationArea: attr(),
sourceEnergyTeam: attr(),
isEnergyTeam: Ember.computed('specialisationArea', function(){
return this.get('specialisationArea') == 101;
})
});
Team Index Route:
export default Ember.Route.extend({
model() {
return this.store.findAll('team');
}
});
Team List Template:
{{#each model as |team|}}
<tr>
<td>{{team.name}}</td>
<td>{{team.shortName}}</td>
<td>{{team.description}}</td>
<td>{{team.teamLeader.fullName }}</td>
<td>{{#link-to "teams.team" team}}Details{{/link-to}}</td>
</tr>
{{/each}}
And this is the mirage configuration:
this.get('/teams', () => {
return [{
id : 11,
type: 'team',
name: 'Energy',
description: 'energy desc',
shortName: 'short',
teamLeader: 12,
users: [12],
energyTeam: true
}];
});
this.get('/teams/:team_id', () => {
return {
id: 11,
type: 'team',
name: 'energy',
description: 'energy desc',
shortName: 'eg',
teamLeader: 12,
users: [12],
energyTeam: true
};
});
this.get('/users', () => {
return [{
id: 12,
type: 'user',
firstName: 'Pedro',
lastName: 'Alonso',
team: 11
}];
});
I'm not sure what's going wrong, but in the network calls I can see that only a call to '/teams' is being triggered. Any ideas?
Thanks

ember data only with a belongsto relationship

here is a working jsbin: http://emberjs.jsbin.com/EnOqUxe/71/edit
What i´d like to have is there the company doesn´t need any reference to the person.
non working code
App.Company.FIXTURES = [
{ id: 1, name: 'Microsoft'},
{ id: 2, name: 'Apple'}
];
App.Person.FIXTURES = [
{ id: 1, name: 'Steve Jobs', company:2},
{ id: 2, name: 'Bill Gates', company:1},
{ id: 3, name: 'Steve Ballmer', company:1}
];
How can i achieve this?
thank you
You're practically there. You just need to fix up the models a bit:
App.Company = DS.Model.extend({
name: DS.attr('string')
});
App.Person = DS.Model.extend({
name: DS.attr('string'),
company: DS.belongsTo('company', {async:true})
});
And change your model hook, since now you link to companies through people, not people through companies.
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('person');
}
});
http://emberjs.jsbin.com/EnOqUxe/72/edit

Trying To Do A Simple Add Item To FIXTURE

I have a simple fixture:
App.User.FIXTURES = [
{ userid: 1, name: 'George', email: 'george#gmail.com', bio: 'Lorem Ipsum', created: 'Jan 5, 2015' },
{ userid: 2, name: 'Tom', email: 'tom#hotmail.com', bio: 'Lorem Ipsum 2', created: 'Jan 15, 2015' },
{ userid: 3, name: 'Mary', email: 'mary#aol.com', bio: 'Lorem Ipsum 3', created: 'Jan 25, 2015' }
];
And I have a simple submit: (snippet)
App.AddController = Ember.ArrayController.extend({
actions: {
save: function () {
App.User.createRecord({ id: 4, userid: 4, name: 'Created person', email: 'sdh', bio: 'my bio', created: '6543456' });
I THINK this is right as I'm not getting an error on createRecord anymore, but now I'm getting an error, any ideas? One more step I'm missing just to shove something into a fixture?
Uncaught TypeError: Object function () {
if (!wasApplied) {
Class.proto(); // prepare prototype...
}
o_defineProperty(this, GUID_KEY, undefinedDescriptor);
o_defineProperty(this, '_super', undefinedDescriptor);
Kingpin2k is correct in that calling createRecord on the UserModel itself is an older way of using Ember Data. If you're using the latest version you should call createRecord from the store object.
Here's what it should look like:
App.AddController = Ember.ArrayController.extend({
actions: {
save: function () {
//Create a new user
var user = this.store.createRecord('user',{
id: 4,
userid: 4,
name: 'Created person',
email: 'sdh',
bio: 'my bio',
created: '6543456'
});
// Saves the new model, but not needed if you're just using FIXTURES
// Making the call shouldn't throw any errors though and is used in the Guide
user.save();
// Now you can find your record in the store
this.store.find('user', 4).then(function(user){
console.info(user);
});
}
}
});
This was tested on:
DEBUG: -------------------------------
DEBUG: Ember : 1.6.0-beta.1+canary.24b19e51
DEBUG: Handlebars : 1.0.0
DEBUG: jQuery : 2.0.2
DEBUG: -------------------------------
I'd recommend reviewing the "Creating a New Model Instance" portion of the Ember getting started guide as they cover this topic there:
http://emberjs.com/guides/getting-started/creating-a-new-model/

Emberjs - adding new record to existing array

I'm trying to add a new record to an already existing array of objects.
The form works fine and when I press 'add' on the button, I get the values through.
However, I'm not able to create a new record, I get an error stating
this.init.apply(this, arguments); } has no method 'CreateRecord'".
Thank you for your help.
Here's my code:
App.Store = DS.Store.extend({
revision: 12,
adapter: 'DS.FixtureAdapter'
});
App.AddController = Ember.ObjectController.extend({
content: Ember.Object.create(),
addTo: function(obj){/*
App.Store.createRecord(
App.Post,
{
id: 3,
title: 'Created person',
author: 'dh2',
publishedAt: new Date('12-12-2003')
});*/
alert(JSON.stringify(obj) + "\n" + obj.title);
}
});
App.Post = DS.Model.extend({
title: DS.attr('string'),
author: DS.attr('string'),
publishedAt: DS.attr('date')
});
App.Post.FIXTURES = [
{
id:1,
title: "This is my title",
author: "John Doe",
publishedAt: new Date('12-27-2012')
},
{
id:2,
title: "This is another title",
author: "Jane Doe",
publishedAt: new Date('02-03-2013')
}
];
From inside a controller the store instance of your app is always available because it get's injected in every controller automatically by the framework, so you should access the store like this:
this.get('store').createRecord(App.Post, {...});
This should work correctly and not raise any errors.
Hope it helps.

Persisting hasMany assoc in emberdata

Any examples of persisting new model entity with hasMany associacion?
Here is an example, see http://jsfiddle.net/pangratz666/vuT2v/
App.Comment = DS.Model.extend({
text: DS.attr('string')
});
App.Post = DS.Model.extend({
title: DS.attr('string'),
comments: DS.hasMany('App.Comment')
});
var first = App.Comment.createRecord({
id: 'firstComment',
text: 'first comment'
});
var second = App.Comment.createRecord({
id: 'secondComment',
text: 'second comment'
});
var post = App.Post.createRecord({
id: 1,
title: 'post title'
});
var comments = post.get('comments');
comments.addObject(first);
comments.addObject(second);
App.store.commit();​