Question

我对如何在JS和HTML中传递Mongo文档有疑问。我在下面有一个例子，我试图让我的popover显示正在盘旋的缩略图的名称。当有人点击缩略图时，会弹出一个模式，显示图片以及缩略图的描述。问题是，当我尝试将this.name元素传递给popover时，它会显示我为所有缩略图悬停的第一个缩略图的名称，但它不会使用所有模式上第一个缩略图的信息（它实际上是动态的）。我想知道我做错了什么，我发现的唯一工作就是将{{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() {},
        });
    }
  });
}

在流星中传递Mongo文档

0 个答案: