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

Question

我正在通过 facebook 图检索好友对象 API。这个想法是显示返回的朋友的名字列表，允许用户从这个列表中 select 一个或多个朋友，并在单击按钮后确定用户 select 的朋友的 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，返回 一旦select离子被用户制造？

Answer 1

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

保存：

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

检索：

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

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

Binding data to and retrieving data from DOM elements in Meteor 1.2

javascript

meteor

meteor-blaze