燼幫手等待一個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