在 Meteor 中传递 Mongo 文档

Question

我有一个关于如何在我的 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() {},
        });
    }
  });
}

Answer 1

就像 BraveKenny 已经建议的那样，将辅助事件移动到 Template.gallery。这不是美化代码的可选/修饰步骤。它在事件助手中设置正确的数据上下文。

---

这是一个样板应用程序，展示了数据上下文的工作方式：

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