Question

我试图加载一个包含多个人列表的页面，以及一个＆＃34;地址＆＃34;每个链接旁边的人，地址和地址都是我的rails后端的单独模型，我希望ember在显示列表时加载人员列表，并在用户点击链接时从后端请求单个地址。

我知道组件不应该直接调用商店，但我很难理解控制器如何做到这一点。

这是我目前的（非工作）代码：

// app/router.js
import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('about');
});

export default Router;

// app/routes/about.js
export default Ember.Route.extend({
  model() {
    return this.store.findAll('person');
  }
});

// app/models/person.js
import DS from 'ember-data';

export default DS.Model.extend({
  first_name: DS.attr('string'),
  last_name: DS.attr('string'),
  birthday: DS.attr('date'),
  address: DS.belongsTo('address')
});

// app/models/address.js
import DS from 'ember-data';

export default DS.Model.extend({
  firstLine: DS.attr('string'),
  postCode: DS.attr('string'),
  town: DS.attr('string'),
  person: DS.belongsTo('person')
});

// app/controllers/about.js
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    toggleAddress(user) {
      if(this.get('shown_address') == null) {
          this.set("address", this.store.query('address', user));
          this.set('shown_address', user);
      } else {
        this.set("shown_address", null)
      }
    }
  }
});

// app/components/about-address.js
import Ember from 'ember';

export default Ember.Component.extend({
});

<!-- app/templates/components/about-address.hbs -->

{{#if shown_address}}
  {{shown_address.first_name}} {{shown_address.last_name}}<br/>
  address: {{address}} <br/>
  <a href="" {{action "toggleAddress" user}}>Address</a>
{{else}}
  hidden:
  <a href="" {{action "toggleAddress" user}}>Address</a>
{{/if}}

<!-- app/templates/about.hbs -->
<h1>about</h1>

  {{#each model as |user|}}
    <h3>Welcome '{{user.first_name}}'</h3>
    {{about-address user=user}}
  {{/each}}
{{outlet}}

有关如何解决此问题的任何线索？

emberJS在单击组件时动态加载模型

0 个答案: