1

この例( 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}} テンプレートに表示することです。コードの問題はクライアントのどこかにあると思いますが、修正方法がわかりません。

前もって感謝します！

4

1 に答える 1

0

あなたが持っているクライアントコードのように見えます

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

2 回定義されています。あなたは書くつもりでしたか：

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 に答える