다음 예제 (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에서 꺼내어 템플릿으로 렌더링하는 데 어려움이 있습니다. 내가하고 싶은 것은 각 그림을 {{그림}} 틀에 표시하는 것입니다. 나는이 코드의 문제가 클라이언트 어딘가에 있다고 생각하지만, 어떻게 해결해야할지 모르겠다.
미리 감사드립니다. 그것은 당신의 클라이언트 코드처럼 보이는
최고를이 도움이됩니다. 그러나 나는 여전히 사진 템플릿을 렌더링하는 데 약간의 문제가 있습니다. 내가 제공 한 내용을 아래 코드로 수정했습니다. 사진은 콘솔에 렌더링되지만'사진 '으로는 사용되지 않습니다. 나는 이것을위한 쉬운 유성 트릭이있을 것이라고 확신한다. 생각? 'Template.facebookphoto.helpers { 사진 : Meteor.call ('getUserData', function (err, data) { var photo = data.data [0]; console.log (사진); 돌아 오는 사진; }) }); ' – Seano314
나는 당신의 문제가 다소 혼란 스럽다. 페이지가 렌더링 될 때 이미지 태그가 ''입니까? 그렇다면 img의'src'는 무엇입니까? – justswim
내 질문에 너무 혼란 스러워요 :) 클라이언트에서 그림을 하드 코딩하면 템플릿 {{그림}}에 렌더링되고 FB에서 데이터를 렌더링 할 수 있지만, 그렇지 않습니다. 둘을 연결할 수 있습니다. 문제가 컬렉션을 제대로 설정하지 않아서 발생한 것 같습니다. 내 소식을 통해이 결론을 도왔습니다. 지금은 새로운 컬렉션을 위해 FB에서 MongoDB에 데이터를 삽입하는 작업을하고 있습니다. 방금 문제를 일으키는 다른 질문을 열었습니다. 다음은 [link] (http://stackoverflow.com/questions/20733394/insert-data-to-meteor-from-facebook-api)입니다. 감사! – Seano314