Ember.js load page by URL - ember.js

Question

Copied example from emberjs official site called Mailbox (under ROUTING).
App.Mailbox = Em.Object.extend();
App.Mailbox.reopenClass({
find: function(id) {
if (id) {
return App.FIXTURES.findBy('id', id);
} else {
return App.FIXTURES;
}
}
});
App.Router.map(function() {
this.resource('mailbox', { path: '/:mailbox_id' }, function() {
this.resource('mail', { path: '/:message_id' });
});
});
App.ApplicationRoute = Em.Route.extend({
model: function() {
return App.Mailbox.find();
}
});
App.MailRoute = Em.Route.extend({
model: function(params) {
return this.modelFor('mailbox').messages.findBy('id', params.message_id);
}
});
fixtures:
App.FIXTURES = [
{
name: "Inbox",
id: "inbox",
messages: [
{
id: 1,
subject: "Welcome to Ember",
from: "tomster#emberjs.com",
to: "user#example.com",
date: new Date(),
body: "Welcome to Ember. We hope you enjoy your stay"
}, {
id: 2,
subject: "Great Ember Resources",
from: "tomster#emberjs.com",
to: "user#example.com",
date: new Date(),
body: "Have you seen embercasts.com? How about emberaddons.com?"
}]}, {
name: "Spam",
id: "spam",
messages: [
{
id: 3,
subject: "You have one the Nigerian lottery!!!111ONEONE",
from: "419#thereallotteryhonest.ng",
to: "user#example.com",
date: new Date(),
body: "You have ONE the lottery! You only have to send us a small amount of monies to claim your prize"
}]}, {
name: "Sent Mail",
id: "sent-mail",
messages: [
{
id: 4,
subject: "Should I use Ember",
from: "user#example.com",
to: "tomster#emberjs.com",
date: new Date(),
body: "Ember looks pretty good, should I use it?"
}]}];
and html:
<script type="text/x-handlebars">
<div class="url">URL: {{target.url}}</div>
<aside>
<ul>
<li><h2>Mailboxes</h2></li>
{{#each}}
<li>
{{#link-to "mailbox" this currentWhen="mailbox"}}
<span class="count">
{{messages.length}}
</span>
{{name}}
{{/link-to}}
</li>
{{/each}}
</ul>
</aside>
<section class="main">
{{outlet}}
</section>
</script>
<script type="text/x-handlebars" id="index">
<div class="index">
<h1>TomsterMail</h1>
<span class="tomster"></span>
</div>
</script>
<script type="text/x-handlebars" id="index">
<div class="mail">
<dl>
<dt>From</dt>
<dd>{{from}}</dd>
<dt>To</dt>
<dd>{{to}}</dd>
<dt>Date</dt>
<dd>{{date date}}</dd>
</dl>
<h4>{{subject}}</h4>
<p>{{body}}</p>
</div>
</script>
<script type="text/x-handlebars" id="mailbox">
<table>
<tr>
<th>Date</th>
<th>Subject</th>
<th>From</th>
<th>To</th>
</tr>
{{#each messages}}
{{#link-to "mail" this tagName=tr}}
<td>{{date date}}</td>
<td>{{view.isActive}}{{subject}}</td>
<td>{{from}}</td>
<td>{{to}}</td>
{{/link-to}}
{{/each}}
</table>
{{outlet}}
</script>
<script type="text/x-handlebars" id="mailbox/index">
<div class="mailbox-index">
Select an email
</div>
</script>
When I go to url /index.html#/inbox/1 following exception thrown:
Assertion failed: Cannot call get with 'id' on an undefined object.
I have web application which needs same functionality, but with server requests (not from FIXTURES)

Answer 1

Try changing your code for retrieving the model:
return this.modelFor('mailbox').get('messages').findBy('id', params.message_id);
In Ember, you need to use get() to retrieve properties and associations
\

Answer 2

If i replace this.modelFor('mailbox').get('messages').findBy('id', params.message_id); with ajax call then everything works as expected
App.MailRoute = Em.Route.extend({
model: function(params) {
var ref = this;
return $.get("/inbox/"+params.message_id).then(function(data){
return data.findBy('id', params.message_id);
});
}
});
});