Menu
How can I get the following example code to render not just the person data but also the phone numbers of that person when rendering the URL /#/persons/1. I try to loop though the phone numbers with {{#each phoneNumber in phoneNumbers}} but there has to be a fundamental understanding error on my side.
Right now I only get:
app.js
App = Ember.Application.create({
LOG_TRANSITIONS: true,
rootElement: '#container'
});
// Router
App.Router.map(function() {
this.resource('persons', function() {
this.resource('person', { path: ':person_id' });
});
this.resource('phoneNumbers', function() {
this.resource('phoneNumber', { path: ':phone_number_id' });
});
});
App.PersonsRoute = Ember.Route.extend({
model: function() {
return App.Person.find();
}
});
App.PhoneNumbersRoute = Ember.Route.extend({
model: function() {
return App.PhoneNumber.find();
}
});
// Models
App.Store = DS.Store.extend({
revision: 11,
adapter: 'DS.FixtureAdapter'
});
App.Person = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
phoneNumbers: DS.hasMany('App.PhoneNumber')
});
App.PhoneNumber = DS.Model.extend({
number: DS.attr('string'),
person: DS.belongsTo('App.Person')
});
App.Person.FIXTURES = [{
id: 1,
firstName: 'X',
lastName: 'Smith'
}, {
id: 2,
firstName: 'Y',
lastName: 'Smith'
}];
App.PhoneNumber.FIXTURES = [{
id: 1,
person_id: 1,
number: '20'
}, {
id: 2,
person_id: 1,
number: '23'
}, {
id: 3,
person_id: 2,
number: '42'
}];
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Phone book</title>
</head>
<body>
<div id='container'></div>
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="persons">
<p>All people:</p>
<ul>
{{#each controller}}
<li>{{firstName}} {{lastName}}</li>
{{/each}}
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="person">
<h1>{{firstName}} {{lastName}}</h1>
{{#if phoneNumbers.length}}
<ul>
{{#each phoneNumber in phoneNumbers}}
<li>{{phoneNumber.number}}</li>
{{/each}}
</ul>
{{/if}}
</script>
<script type="text/x-handlebars" data-template-name="phone_numbers">
<ul>
{{#each controller}}
<li>{{number}}</li>
{{/each}}
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="phone_number">
<h1>{{number}}</h1>
</script>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src="js/ember.js"></script>
<script type="text/javascript" src="js/ember-data.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</html>
503
Ember-data doesn't act like ActiveRecord in this regard: when you use has_many you have to have a property that is an array of ids for the records. It isn't enough to have a foreign key for the owner on the reciprocal model.
try adding phoneNumbers: [1, 2] to your first Person fixture, and phoneNumbers: [3] to the second.
If you were using the RESTAdapter, those key names would be phone_number_ids instead. If you use active_model_serializers you can use the embed feature to automatically include an array of ids.
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
