Извлечение фотографий из FB-графика с помощью Meteor

Question

Я пытаюсь отобразить фотографии из пакета NPM FB-Graph ( https://npmjs.org/package/fbgraph), следуя этому примеру ( 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" тег и API Facebook возвращает данные, как показано ниже.

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

Более простой способ сделать это может быть просто позвонить getUserData метод в вашем facebookphoto Сам шаблон, таким образом:

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