![](/img/trans.png)
[英]Meteor: Best Method for Passing Mongo Selector from Client to Server
[英]Passing Mongo Documents in Meteor
我有一个关于如何在JS和HTML上传递Mongo文档的问题。 我在下面有一个示例,我试图让我的弹出窗口显示正在悬停的缩略图的名称。 当有人单击缩略图时,会弹出一个模态,显示图片以及缩略图的描述。 问题是,当我尝试将this.name元素传递给弹出框时,它会显示我将鼠标悬停在所有缩略图上的第一个缩略图的名称,但不会在所有模态上使用第一个缩略图的信息(它实际上是动态的)。 我想知道自己在做错什么,我发现的唯一解决方法是将{{name}}标签放入实际html中,作为缩略图的数据内容。
的HTML
<template name="gallery">
<div class="col-xs-6 col-sm-4 col-md-2">
<a href="#" class="thumbnail" data-content='{{name}}'>
<img src="{{img}}" alt="...">
<div class="caption">
<h5><center>{{name}}</center></h5>
</div>
</a>
</div>
</template>
JS
Gallerys = new Mongo.Collection("gallerys");
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
gallerys: function () {
return Gallerys.find({}, {sort: {createdAt :-1}});
}
});
Template.body.events({
"mouseover a.thumbnail" :function(event, template){
$('a.thumbnail').popover({
trigger: "hover",
placement: "bottom",
})
},
"click a.thumbnail": function(event, template) {
event.preventDefault();
bootbox.dialog({
title: '<center><h2>'+ this.name.toUpperCase() +'</h2></center>',
message: '<div class="row"><div class="col-md-3"><img class="img-rounded" height="200" width="200" src="' + this.img + '"></div><div class="col-md-9"><h4>Description</h4>"'+ this.description +'"</div></div>',
size: 'large',
buttons: {
play:{
label:'PLAY SAMPLE <span class="glyphicon glyphicon-play"></span>',
className:"btn-success pull-left modalbtn"
},
download: {
label:'DOWNLOAD <span class="glyphicon glyphicon-download-alt"></span>',
className:"btn-primary modalbtn",
callback: function() {}
}
},
onEscape: function() {},
});
}
});
}
就像BraveKenny已经建议的那样,将帮助事件移动到Template.gallery。 美化您的代码不是一个可选的步骤。 它在事件帮助器中设置了正确的数据上下文。
这是显示数据上下文工作方式的样板应用程序:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.