1

我正在尝试按照此示例（http://www.andrehonsberg.com/article/facebook-graph-api-显示 NPM FB-Graph （ https://npmjs.org/package/fbgraph ）包中的照片流星-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}} 模板中显示每张图片。我相信代码的问题出在客户端的某个地方，但我不确定如何解决它。

提前致谢！

4

1 回答 1

0

它看起来像在您的客户端代码中

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

定义了两次。你的意思是写：

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

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

Template.facebookphoto.helpers({
        pictures : function(e) {
            Meteor.call('getUserData', function(err, data) {
                $('input[name=fbPhotos]').text(EJSON.stringify(data, undefined, 4));            
             });
        }
});
于 2013-12-20T02:39:49.517 回答