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

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

本文关键字:元素 数据 检索 DOM 中的 数据绑定 Meteor      更新时间:2023-09-26

我正在通过facebook图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)返回的最佳方式是什么??

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

保存:

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

检索:

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