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

Posted 2023-03-12

【中文标题】使用 Meteor 从 FB-graph 中提取照片

【英文标题】：Extracting photos from FB-graph with Meteor

【发布时间】：2013-12-19 18:18:37

【问题描述】：

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

提前致谢！

【参考方案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));            
             );
        
);

【讨论】：

太棒了，这有帮助。但是，我仍然在渲染图片模板时遇到了一些麻烦。我修改了您提供给以下代码的内容。照片在控制台中呈现，但不适用于pictures。我敢肯定这有一个简单的 Meteor 技巧。想法？ Template.facebookphoto.helpers( pictures: Meteor.call('getUserData', function(err, data) var photo = data.data[0]; console.log(photo); return photo; ) );

我对你的问题有点困惑。当页面呈现时，它是否显示图像标签 <img class="img-rounded" src="picture"> ？如果有，img 的src 是什么？

我对我的问题也有点困惑 :) 如果我在客户端对图片进行硬编码，它将呈现到模板 picture 并且我能够从 FB 呈现数据，但是我'我无法将两者联系起来。我看起来问题出在没有正确设置集合——你的帖子帮助我得出了这个结论。截至目前，我正在将数据从 FB 插入 MongoDB 以获取新集合。我刚刚提出了另一个问题，我遇到了麻烦。这是link。谢谢！

酷，我很高兴正在取得进展。祝你好运！