Question

来自emberjs官方网站名为Mailbox的复制示例（在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);
  }
});

夹具：

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?"
  }]}];

和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>

当我在抛出异常后转到网址/index.html#/inbox/1时：

Assertion failed: Cannot call get with 'id' on an undefined object.

我的Web应用程序需要相同的功能，但需要服务器请求（不是来自FIXTURES）

Answer 1

尝试更改代码以检索模型：

return this.modelFor('mailbox').get('messages').findBy('id', params.message_id);

在Ember中，您需要使用get（）来检索属性和关联 \

Answer 2

如果我用ajax调用替换 this.modelFor（'mailbox'）。get（'messages'）。findBy（'id'，params.message_id）; ，那么一切都按预期工作

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);
    });
   }
});

}）;

Ember.js按URL加载页面

2 个答案: