将数据绑定到Meteor 1.2中的DOM元素并从中检索数据
Binding data to and retrieving data from DOM elements in Meteor 1.2
我正在通过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">×</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');
相关文章:
- 使用JQuery检索元素数据
- WebGL错误-错误:WebGL:bindBuffer:buffer已包含元素数据
- 如何在字符串中包含隐藏的 HTML 元素 - 数据表 - jquery
- 聚合物硒测试访问子元素数据
- 如何将动态元素数据传输到 struts2.
- j查询如何将值从输入字段设置为其他元素数据属性
- jQuery只会被点击元素数据
- 按方法动态更改元素数据
- 将父聚合物元素数据暴露给子元素
- 第一个jQuery插件-如何以正确的方式保存关联元素数据
- 将元素[数据]发布到服务器端的最佳方式
- Javascript隐藏对象元素数据值的子节点
- 获取AngularJS脚本中的HTML元素数据
- jQuery存储要在回调中使用的任意元素数据
- 查找父元素数据值并显示它
- 从元素数据中获取对象属性
- 插入HTML表格行"标题"基于动态可见元素数据属性的研究
- 查找具有与另一个元素数据属性匹配的id的元素的最佳方法
- 如何获得元素数据调试脚本
- Aurelia定制元素数据绑定