ember helper ожидает ajax-запроса

я пишу компонент ember, когда метод инициализации вызывает запрос 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);

как заставить моего Ember Helper ждать ajax-запроса?


javascript handlebars.js ember.js ember-components ember-controllers
person cahyowhy    schedule 18.04.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Пожалуйста, подумайте дважды, прежде чем загружать данные внутри компонентов. Компоненты должны быть максимально изолированы. Я понимаю, есть много случаев, когда нам приходится загружать данные внутри компонентов. В вашем случае вы можете передать данные из родительского контейнера (может быть контроллер) в компонент, загрузив данные внутри контейнера и передав их компоненту для рендеринга.

Чтобы ответить на ваш вопрос, помощник возьмет на себя ответственность, как только он будет вызван в шаблоне, и не будет беспокоиться о состоянии компонента. Итак, постарайтесь не вызывать помощника, пока данные не будут загружены полностью.

В вашем файле компонента

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

Обратитесь к этому twiddle для подробного вызова: https://ember-twiddle.com/53bd472bbeaa42d1790da2ba97a6a803?openFiles=templates.components.my-comp.hbs%2Ctemplates.components.my-comp.hbs

person Gokul Kathirvel    schedule 18.04.2017
comment
this.set('isLoading', false); строка должна быть в функции жирной стрелки (на одну строку выше). - person ykaragol; 18.04.2017