1

다음 예제 (http://www.andrehonsberg.com/article/facebook-graph-api-meteor-js)에 따라 NPM FB-Graph() 패키지의 사진을 표시하려고합니다. API를 연결하고 데이터를 렌더링했지만 EJSON 데이터를 내 그림 템플릿으로 추출하는 데 문제가 있습니다.유성을 사용하여 FB 그래프에서 사진 추출

먼저, 내가 작업중인 코드를 보여 드리겠습니다. 내가 가진 데이터를 테스트하고있어, 지금

<template name="fbgraph"> 
    <div id="main" class="row-fluid"> 
     {{> facebookphoto}} 
    </div> 

    <button class="btn" id="btn-user-data">Get User Data</button> 
    <div class="well"> 
     <pre id="result"></pre> 
    </div> 
</template> 


<template name="facebookphoto"> 
    <div class="photos"> 
    {{#each pictures}} 
     {{> photoItem}} 
    {{/each}} 
    </div> 
</template> 

<template name="photoItem"> 
    <div class="photo"> 
    <div class="photo-content"> 
     <img class="img-rounded" src="{{picture}}"> 
    </div> 
    </div> 
</template> 

:

Template.fbgraph.events({ 
    'click #btn-user-data': function(e) { 
     Meteor.call('getUserData', function(err, data) { 
      $('#result').text(JSON.stringify(data, undefined, 4));    
     }); 
    } 
}); 

var fbPhotos = []; 

Template.fbgraph.events({ 
    fbPhotos : function(e) { 
     Meteor.call('getUserData', function(err, data) { 
      $('input[name=fbPhotos]').text(EJSON.stringify(data, undefined, 4));    
     }); 
    } 
}); 

Template.facebookphoto.helpers({ 
    pictures: fbPhotos 
}); 

그리고 여기 내 템플릿입니다 : 여기

function Facebook(accessToken) { 
    this.fb = Meteor.require('fbgraph'); 
    this.accessToken = accessToken; 
    this.fb.setAccessToken(this.accessToken); 
    this.options = { 
     timeout: 3000, 
     pool: {maxSockets: Infinity}, 
     headers: {connection: "keep-alive"} 
    } 
    this.fb.setOptions(this.options); 
} 

Facebook.prototype.query = function(query, method) { 
    var self = this; 
    var method = (typeof method === 'undefined') ? 'get' : method; 
    var data = Meteor.sync(function(done) { 
     self.fb[method](query, function(err, res) { 
      done(null, res); 
     }); 
    }); 
    return data.result; 
} 

Facebook.prototype.getUserData = function() { 
    return this.query('me'); 
} 
Facebook.prototype.getPhotos = function() { 
    return this.query('/me/photos?fields=picture'); 
} 

Meteor.methods({ 
    getUserData: function() { 
     var fb = new Facebook(Meteor.user().services.facebook.accessToken); 
     var data = fb.getPhotos(); 
     return data; 
    } 
}); 

Meteor.methods({ 
    getPhotos: function() { 
    var fb = new Facebook(Meteor.user().services.facebook.accessToken); 
    var photos = fb.getPhotos; 
    return photos; 
} 
}); 

내 클라이언트 코드입니다 : 여기 내 클라이언트 코드는 id="results" 태그와 Facebook API는 아래와 같이 데이터를 반환합니다.

{ 
    "data": [ 
     { 
      "picture": "https://photo.jpg", 
      "id": "1234", 
      "created_time": "2013-01-01T00:00:00+0000" 
     }, 
     { 
      "picture": "https://photo.jpg", 
      "id": "12345", 
      "created_time": "2013-01-01T00:00:00+0000" 
     } 
} 

그러나 각 사진을 EJSON에서 꺼내어 템플릿으로 렌더링하는 데 어려움이 있습니다. 내가하고 싶은 것은 각 그림을 {{그림}} 틀에 표시하는 것입니다. 나는이 코드의 문제가 클라이언트 어딘가에 있다고 생각하지만, 어떻게 해결해야할지 모르겠다.

미리 감사드립니다. 그것은 당신의 클라이언트 코드처럼 보이는

답변

0

당신은

Template.fbgraph.events({ ... }) 

두 번 정의했습니다. 당신이 쓰는 찾으 셨나요 따라서 그것은 당신의 facebookphoto 템플릿 자체에 getUserData 메서드를 호출 할 수 있습니다 할

Template.fbgraph.helpers({ 
    fbPhotos : function(e) { 
     Meteor.call('getUserData', function(err, data) { 
      $('input[name=fbPhotos]').text(EJSON.stringify(data, undefined, 4));    
     }); 
    } 
}); 

간단한 방법 :

Template.facebookphoto.helpers({ 
     pictures : function(e) { 
      Meteor.call('getUserData', function(err, data) { 
       $('input[name=fbPhotos]').text(EJSON.stringify(data, undefined, 4));    
      }); 
     } 
}); 
+0

최고를이 도움이됩니다. 그러나 나는 여전히 사진 템플릿을 렌더링하는 데 약간의 문제가 있습니다. 내가 제공 한 내용을 아래 코드로 수정했습니다. 사진은 콘솔에 렌더링되지만'사진 '으로는 사용되지 않습니다. 나는 이것을위한 쉬운 유성 트릭이있을 것이라고 확신한다. 생각? 'Template.facebookphoto.helpers { 사진 : Meteor.call ('getUserData', function (err, data) { var photo = data.data [0]; console.log (사진); 돌아 오는 사진; }) }); ' – Seano314

+0

나는 당신의 문제가 다소 혼란 스럽다. 페이지가 렌더링 될 때 이미지 태그가 ''입니까? 그렇다면 img의'src'는 무엇입니까? – justswim

+0

내 질문에 너무 혼란 스러워요 :) 클라이언트에서 그림을 하드 코딩하면 템플릿 {{그림}}에 렌더링되고 FB에서 데이터를 렌더링 할 수 있지만, 그렇지 않습니다. 둘을 연결할 수 있습니다. 문제가 컬렉션을 제대로 설정하지 않아서 발생한 것 같습니다. 내 소식을 통해이 결론을 도왔습니다. 지금은 새로운 컬렉션을 위해 FB에서 MongoDB에 데이터를 삽입하는 작업을하고 있습니다. 방금 문제를 일으키는 다른 질문을 열었습니다. 다음은 [link] (http://stackoverflow.com/questions/20733394/insert-data-to-meteor-from-facebook-api)입니다. 감사! – Seano314

관련 문제