ember Helfer für eine Ajax-Anforderung wartet

Question

i, ve eine ember Komponente schreiben, wenn init-Methode sie Ajax-Request aufrufen

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

dies gearbeitet wird, aber leider Helfer meine Glut nicht warten nicht auf Ajax-Request und sagte, die "Daten" ist im Konsolenprotokoll undefined

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

Wie mache ich meine Glut Helfer warten auf eine Ajax-Anfrage?

Answer 1

Bitte beachten Sie zweimal vor dem Laden data inside components. Komponenten sollen so weit wie möglich isoliert sein. Ich verstehe, dass es viele Fälle gibt, in denen wir Daten in Komponenten laden müssen. In Ihrem Fall können Sie die Daten vom übergeordneten Container (kann ein Controller sein) an die Komponente übergeben, indem Sie die Daten im Container laden und an die zu rendernde Komponente übergeben.

Um Ihre Frage zu beantworten, übernimmt der Helfer die Verantwortung, sobald er in der Vorlage aufgerufen wird und sich nicht um den Zustand der Komponente kümmern muss. Versuchen Sie also nicht, den Helper aufzurufen, bis die Daten vollständig geladen sind.

In Ihrer Komponentendatei,

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

In Vorlage Ihrer Komponente,

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

dazu finden Sie detaillierte Aufruf twiddle: https://ember-twiddle.com/53bd472bbeaa42d1790da2ba97a6a803?openFiles=templates.components.my-comp.hbs%2Ctemplates.components.my-comp.hbs