2016-05-22 18 views
0

我目前正在開發一個從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() 
    } 
    } 
}); 

我已經搜索了一個辦法,但大多數的信息是過時的。

你可以找到一個玩弄here

沒有人對我有一個建議?

回答

0

您的路線中的任何地方是否有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讓我們訪問我們模板上的數據並將其傳遞給我們的組件。

讓我知道這是否有幫助。如果這沒有幫助,隨意發佈一個關於你的mixin的旋轉或更多信息。

+0

我按照你的建議添加了一個旋轉。 – mian