个人中心
gpt4 book ai didi

ember.js - 如何呈现 hasMany 关系数据？

转载 作者：行者123 更新时间：2023-12-04 02:15:30 25 4
gpt4 key购买 nike

在呈现 URL/#/persons/1 时，如何让以下示例代码不仅呈现人员数据，还呈现该人的电话号码。我尝试使用 {{#each phoneNumber in phoneNumbers}} 循环遍历电话号码但我这边肯定有一个基本的理解错误。

现在我只得到:

enter image description here

应用程序.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'
}];

索引.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>

最佳答案

Ember-data 在这方面不像 ActiveRecord:当你使用 has_many 时你必须有一个由 id 组成的数组的属性s 用于记录。在互惠模型上为所有者提供外键是不够的。

尝试添加 phoneNumbers: [1, 2]到您的第一个 Person夹具，和 phoneNumbers: [3]到第二。

如果您使用的是 RESTAdapter，那么这些键名将是 phone_number_ids反而。如果您使用 active_model_serializers您可以使用 embed自动包含一组 id 的功能。

关于ember.js - 如何呈现 hasMany 关系数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15601118/

25 4 0
文章推荐： scala - 为什么 Scala 在分配给 val 时需要部分应用柯里化(Currying)函数？
文章推荐： Heroku 上的 Symfony 产生 500 Internal server error 但没有消息
文章推荐： reactjs - addChangeListener 如何在 Facebook React Todo 示例中工作
文章推荐： powershell - 将文件中的所有文本(通配符)替换为起点 Publisher ="{GUID} and ending with a "
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com