灰烬帮手，等待一个ajax请求

Question

我在初始化方法调用ajax请求时编写了一个余烬组件

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

如何使我的余烬助手等待一个ajax请求？

Answer 1

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

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

在您的组件文件中，

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

请参阅此方法以获取详细的调用： https ://ember-twiddle.com/53bd472bbeaa42d1790da2ba97a6a803?openFiles = templates.components.my-comp.hbs%2Ctemplates.components.my-comp.hbs