Squeak.ru - шаблоны программирования

Вызов отношения в шаблоне возвращает DS.PromiseObject

Я использую firebase в сочетании с Ember CLI. У меня есть следующая установка:

ember.debug.js:6401 DEBUG: Ember      : 2.4.5
ember.debug.js:6401 DEBUG: Ember Data : 2.5.1
ember.debug.js:6401 DEBUG: Firebase   : 2.4.2
ember.debug.js:6401 DEBUG: EmberFire  : 1.6.6
ember.debug.js:6401 DEBUG: jQuery     : 2.2.3

У меня есть две простые модели

<!-- app/models/user.js -->
import Model from 'ember-data/model';

export default Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  email: DS.attr('string'),
  profile: DS.belongsTo('profile', {async: true})
});

И вторая модель для моего профиля

<!-- app/models/profile.js -->
import Model from 'ember-data/model';

export default Model.extend({
  companyName: DS.attr('string'),
  user: DS.belongsTo('user', {async: true})
});

У меня есть следующий маршрут профиля:

<!-- app/routes/profile.js -->
import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.query('user', { orderBy: 'email', equalTo: this.get('session.currentUser.email')}).then(function(user){
      console.log(user);
      return user;
    });
  }
});

Я проверяю, совпадает ли адрес электронной почты текущего сеанса с адресом электронной почты в базе данных. И верните объект пользователя. Это работает. (не знаю, правильный ли это способ?)

В моем шаблоне руля профиля у меня есть следующий код.

<!-- app/templates/profile.hbs -->
{{#each model as |user|}}
  {{user.firstName}}
  {{user.lastName}}
  {{user.profile}}
{{/each}}

Это возвращает на экран следующее:

frank spin <DS.PromiseObject:ember545>

Я предполагаю, что данные об отношениях еще не получены. Я не знаю, как решить эту проблему. И второй вопрос: правильно ли я проверяю текущего вошедшего в систему пользователя?


  • Я ответил на вопрос о рендеринге отношений профиля. Попробуйте задать отдельный вопрос о том, является ли это правильным способом загрузки текущего пользователя с помощью Firebase. Я подозреваю, что это не так, но это совершенно отдельная проблема. 16.04.2016

Ответы:


1

Вы правы, что данные об отношениях не были получены. Но если вы напишете свой шаблон таким образом, вы все равно должны увидеть информацию о профиле при его загрузке:

{{#each model as |user|}}
  {{user.firstName}}
  {{user.lastName}}
  {{user.profile.companyName}}
{{/each}}

PromiseObjects в шаблонах

Цель объектов промисов (и массивов промисов) — позволить вам связывать данные в Ember до их загрузки и обновлять эти привязки после разрешения промиса. Это отлично подходит для второстепенной информации, которую можно безопасно отображать после загрузки остальной части страницы.

Если вы попытаетесь отобразить свойства модели profile, когда обещание не разрешено, вы получите пустое место. Вы можете отобразить информацию о состоянии загрузки, используя свойство isPending:

{{#each model as |user|}}
  {{user.firstName}}
  {{user.lastName}}

  {{#if user.profile.isPending}}
    <span class="spinner">…</span>
  {{else}}
    {{user.profile.companyName}}
  {{/if}}
{{/each}}

Вы также можете использовать свойство isRejected для обнаружения сбоев API и разрешить пользователям повторить попытку.

Загрузить перед визуализацией

Если это асинхронное поведение не то, что вам нужно, вы можете принудительно разрешить промис отношений перед рендерингом шаблона в хуке afterModel вашего маршрута:

export default Ember.Route.extend({
  model() {
    return this.store.query('user', { orderBy: 'email',
      equalTo: this.get('session.currentUser.email')});
  },

  afterModel(users) {
    return Ember.RSVP.all(users.invoke('get', 'profile');
  }
});

(В более простой одиночной модели вы могли бы просто написать return model.get('profile') в хуке afterModel.)

Любое обещание, возвращенное из afterModel, заблокирует загрузку маршрута до тех пор, пока оно не будет разрешено. Тогда ваш шаблон всегда будет иметь профиль пользователя, доступный при рендеринге.

16.04.2016
Новые материалы

Угловая структура архитектуры
Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

«Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

Создайте API с помощью Python FastAPI
Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

Веселье с прокси-сервером JavaScript
Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...