0

我，当他们调用 ajax 请求的 init 方法时，我写了一个 ember 组件

    init(){
    this._super(...arguments);
    const context = this;
    if ((this.get('localStorage').getItem('idProfileDesa')) !== null && (this.get('localStorage').getItem('idProfileDesa')) !== undefined) {
      if ((this.get('localStorage').getItem('idProfileDesa')) !== 0) {
        this.get('registerProfileDesaService').findByProfileFormId(this.get('localStorage').getItem('idProfileDesa')).then(
          function (response) {
            context.debug(JSON.stringify(response));
            context.set("alamat", response.alamat);
            context.set("kodeWilayah", response.kodeWilayah);
            context.set("noTelp", response.noTelepon);
            context.set("lokasiWilayah", response.lokasiWilayah);
            context.set("email", response.email);
            context.set("website", response.website);
            context.set("jumlahDusun", response.jumlahDusun);
            context.set("jumlahRw", response.jumlahRW);
            context.set("jumlahRt", response.jumlahRT);
            context.set("jumlahKepalaKeluarga", response.jumlahKepalaKeluarga);
            context.set("jumlahRumahTangga", response.jumlahRumahTangga);
            context.set("jumlahPenduduk", response.jumlahPenduduk);
            context.set("lokasiKantor", response.lokasiKantor);
            context.set("pos", response.pos);
          }, function (e) {
            context.debug(e);
            context.get('commonService').showNotification(e);
          });
      }
    }
  }

这是有效的，但不幸的是，我的 ember 助手没有等待 ajax 请求，并说控制台日志中未定义“数据”

    import Ember from 'ember';

export function validateIsEmail(params/*, hash*/) {
  let email = params[0];
  let mustHaveChar = ["@",".com",".co.id",".id",".org"];
  let didHasWord = 0;
  mustHaveChar.forEach(function (word) {
    didHasWord = didHasWord + email.includes(word);
  });

  return (didHasWord > 1);
}

export default Ember.Helper.helper(validateIsEmail);

如何让我的 ember 助手等待 ajax 请求？

4

1 回答 1

2

在将数据加载到组件中之前，请三思而后行。组件应尽可能地隔离。我知道，在很多情况下，我们必须在组件内加载数据。在您的情况下，您可以将数据从父容器（可能是控制器）传递到组件，方法是将数据加载到容器内并将其传递给组件以进行渲染。

为了回答您的问题，助手将在模板中调用它时立即负责，并且不会担心组件的状态。因此，在数据完全加载之前，尽量不要调用帮助程序。

在您的组件文件中，

  init() {
    this._super(...arguments);
    this.set('isLoading', true); // <- setting the loading state explicitly
    $.ajax('https://jsonplaceholder.typicode.com/users').then((data) => {
      this.set('users', data);
      this.set('isLoading', false); // <- make it false after the data loads
    });
  }

在组件的模板中，

{{#unless isLoading}} <!-- render the component only if the data finished loading -->
    {{#each users as |user|}}
    <li>{{user.name}} :
        {{#if (isemail user.email)}}
        {{user.email}}
    {{else}}
        <span style="color: red">(The email is invaild)</span>
    {{/if}}
    </li>
  {{/each}}
{{/unless}}

有关详细调用，请参阅此 twiddle：https ://ember-twiddle.com/53bd472bbeaa42d1790da2ba97a6a803?openFiles=templates.components.my-comp.hbs%2Ctemplates.components.my-comp.hbs

于 2017-04-18T05:24:29.807 回答