繁体   English   中英

在流星中传递Mongo文档

[英]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。 美化您的代码不是一个可选的步骤。 它在事件帮助器中设置了正确的数据上下文。


这是显示数据上下文工作方式的样板应用程序:

http://meteorpad.com/pad/hPaJ35NnWyHjkWAD3/Leaderboard

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM