烬帮手等待一个Ajax请求

Question

我，已经写在init（）方法他们称之为

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

，这是工作的余烬组件Ajax请求，但不幸的是我的助手的余烬不会等待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

加载前请考虑两次data inside components。组件意味着尽可能地被隔离。我明白，在很多情况下我们必须在组件中加载数据。在你的情况下，你可以通过在容器中加载数据并将其传递给要渲染的组件来将数据从父容器（可以是控制器）传递到组件。

要回答你的问题，只要在模板中调用帮助器，帮助器就会立即执行，不会担心组件的状态。所以，尽量不要调用helper，直到数据完全加载。

在你的组件文件，

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