Question

我正在通过facebook graph API检索朋友对象。我们的想法是显示返回朋友的名字列表，允许用户从此列表中选择一个或多个朋友，并在点击按钮后确定用户选择的朋友的ID。

到目前为止，我有以下代码......

detail.js：

Template.detail.helpers({
    ...
    listOfFriends: function() {
        var list = new Array();
        if (Meteor.user()) {
            list = Meteor.user().profile.listOfFriends;
        }
        return list;
    },
    ...
});

Template.detail.events({
    ...
    'click .select-friends': function(e) {
        e.preventDefault();

        // Display modal.
        $('#friend_list_modal').modal('show');

        Meteor.call('getFacebookFriends', function(err, response) {
            if (err) {
                alert(JSON.stringify(err));
            } else {
                if (response.statusCode != 200) {
                    alert("Error: " + response.statusCode);
                }
            }
        });
    },
    'click #get_ids_button': function(e) {
        e.preventDefault();
        var checkedFriendNames = {}, counter = 0;
        $("#friend_list li.active").each(function(idx, li) {
            checkedFriendNames[counter] = $(li).text();
            counter++;
        });

        // At this point, I have a list of names in checkedFriendNames,
        // but I want the IDs and maybe other attributes as well.

        $('#friend_list_modal').modal('hide');
    }
});

detail.html：

<template name="detail">
    <div class="page page-detail">
        ...
        <div class="container">
            <div class="btn btn-danger list-friends pull-right" data-toggle="tooltip" title="list friends">
                <span class="glyphicon glyphicon-user"></span>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div id="friend_list_modal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">List of Friends</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <div style="max-height: 300px; overflow: auto;">
                            <ul id="friend_list" class="list-group checked-list-box">
                                {{#each listOfFriends}}
                                    <li class="list-group-item">{{name}}</li>
                                {{/each}}
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="get_ids_button" type="button" class="btn btn-default">Get IDs</button>
                </div>
            </div>
        </div>
    </div>
</template>

server.js：

Meteor.methods({
    ...
    getFacebookFriends: function() {
        this.unblock();
        var graphResponse = Meteor.http.call("GET", "https://graph.facebook.com/v2.5/me/friends", {
            params: {
                access_token: Meteor.user().services.facebook.accessToken
            }
        });

        // Save user's list of friends.
        Meteor.users.update(Meteor.userId(), {$set: {"profile.listOfFriends": graphResponse.data.data}});
        return graphResponse;
    },
    ...
});

在Meteor中，将朋友对象（带有id，name，...属性）绑定到DOM然后获取这些属性（例如朋友ID）的最佳方式是什么，选择后返回由用户制作？

Answer 1

我不确定Meteor是否会让这更容易，但您可以使用数据属性在HTML元素中存储有关朋友对象的额外信息。

保存：

<li class="list-group-item" data-friend-id="{{id}}">{{name}}</li>

要检索：

var friendId = $(li).data('friendId');

在Meteor 1.2中将数据绑定到DOM元素并从中检索数据

1 个答案: