javascript - 使用 Meteor 从 FB-graph 中提取照片

Question

我尝试按照此示例 ( https://npmjs.org/package/fbgraph ) 显示 NPM FB-Graph ( http://www.andrehonsberg.com/article/facebook-graph-api-meteor-js ) 包中的照片。我已成功连接 API 并渲染数据，但在将 EJSON 数据提取到图片模板中时遇到问题。

首先，让我向您展示我正在使用的代码。这是我的客户端代码:

  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;
}
}); 

这是我的客户端代码:

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
});

这是我的模板:

<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>

现在，我正在使用 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 中提取每张图片并在模板中渲染它们。我想做的是显示 {{picture}} 模板中的每张图片。我相信代码的问题出在客户端的某个地方，但我不确定如何修复它。

提前致谢!

Answer 1

看起来你的客户端代码中有

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

定义了两次。您的意思是写:

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

更简单的方法可能只是在 facebookphoto 模板本身中调用 getUserData 方法，因此:

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