타다 남은 도우미는

Question

나는,이 일을한다

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

타다 남은 init 메소드들이 호출 구성 요소 아약스 요청을 작성했습니다,하지만 불행히도 내 타다 남은 도우미는 아약스 요청을 기다리고하지 않고 말했다 '데이터'는 콘솔 로그에서 정의되지 않았습니다.

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

내 엠버 헬퍼가 아약스 요청을 기다리는 것을 만드는 방법은 무엇입니까?

Answer 1

로드하기 전에 두 번 고려하십시오. data inside components. 구성 요소는 최대한 격리되어야합니다. 데이터를 구성 요소에로드해야하는 경우가 많습니다. 귀하의 경우, 컨테이너 내부의 데이터를로드하고이를 구성 요소에 전달하여 렌더링 할 상위 컨테이너 (컨트롤러 일 수도 있음)의 데이터를 구성 요소로 전달할 수 있습니다.

질문에 대답하기 위해 도우미는 템플릿에서 호출되는 즉시 요금을 청구하며 구성 요소의 상태는 걱정하지 않습니다. 따라서 데이터가 완전히로드 될 때까지 도우미를 호출하지 마십시오. 구성 요소 파일에서

, 구성 요소의 템플릿에서

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