Как получить доступ к данным Facebook в компоненте?

В настоящее время я разрабатываю Ember.JS приложение, которое получает данные из Facebook.

Проблема в том, что я фактически не знаю, как получить доступ к данным, которые были извлечены в маршруте приложения в моем компоненте (js/hbs).

Я использую ember-simple-auth и torii для аутентификации и извлечения данных.

Мой маршрут приложения в настоящее время выглядит следующим образом:

import Ember from 'ember';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin'

export default Ember.Route.extend(ApplicationRouteMixin, {
  fetchCurrentUser() {
    const data = this.get('session.data.authenticated');
    const {accessToken} = data;

    if (accessToken) {
      return new Promise(resolve => {
        FB.api('/me?fields=name,posts&access_token=' + accessToken, response => {
          resolve()
        })
      })
    }
  },

  beforeModel(transition) {
    this._super(transition);
    if (this.get('session.isAuthenticated')) {
      return this.fetchCurrentUser()
    }
  },

  actions: {
    login() {
      return this
        .get('session')
        .authenticate('authenticator:torii', 'facebook-connect')
        .then(() => {
          this.fetchCurrentUser();
        })
        .catch(err => console.error(err));
    },

    logout() {
      return this
        .get('session')
        .invalidate()
    }
  }
});

Я уже искал подход, но большая часть информации устарела.

Вы можете найти twiddle здесь

У кого-нибудь есть предложения для меня?

1 ответ

  1. У вас есть model()крюк где-нибудь в вашем маршруте? Я вижу beforeModel()крюк для обработки перехода, но не вызов модели. Это живет в вашем ApplicationRouteMixin?

    model() {
      return this.fetchCurrentUser();
    }
    

    Модель вызова, как правило, где ваш ajax запрос живет. Результат model()затем передается setupController. Контроллер-это то, что позволяет получить доступ к вашим данным в вашем шаблоне/представлении. setupControllerсущественно делает:

    setupController(controller, model) {
      Ember.set(controller, 'model', model);
    }
    

    Для справки: https://github.com/emberjs/ember.js/blob/c7db394fe322dcfee0c79a58334103e2dc87a3a1/packages/ember-routing/lib/system/route.js#L1629-L1635

    Это называется автоматически, но без model()вызова он ничего не делает. Компоненты не имеют состояния-это означает, что они имеют доступ только к данным, которые мы передаем им. Итак, если у вас есть этот modelкрюк сейчас, то мы можем передать его нашему компоненту в нашем шаблоне:

    {{our-component model=model}}

    model возвращает наши данные — > > setupControllerустанавливает эти данные на контроллере — > > controllerпозволяет нам получить доступ к этим данным на нашем шаблоне и передать его нашему компоненту.

    Дайте мне знать, если это поможет. Не стесняйтесь размещать twiddle или больше информации о вашем mixin, если это не поможет.