从外部事件回调访问数据

Question

<template name="SideNav">
  <ul class='block-items white'>
    {{#each blocks}}
      <li class='block-item'>
        <i class="fa fa-fw fa-folder"></i>
        <i class="fa fa-fw fa-folder-open"></i>
        <a href='#' class='block-item-link'>
          {{name}}
     ...
     {{/each blocks}}
</template>

鉴于此，我可以在单击每个块项目的 id 时访问它

Template.SideNav.events({
  "click .block-item": function (e, tem) {
    //var blockItemId = this._id;
  }
});

如何从其他地方借用相同的功能，例如onRendered()？看看下面的例子：

  Template.SideNav.onRendered(function() {
    this.$('.block-items').sortable({
      update: function (e, ui) {
        _.each($('.block-item'), function (blockItem) {
          // How do I get blockId?
        })
        console.log("block item rearranged");
      }
    });

update 是一个回调函数，当ul 列表中的块项目顺序发生变化时会调用它。我需要一种方法来遍历所有块项目并获取它们对应的 Mongo id。我该怎么做？

相关文件：

1. The context of "this" in Meteor template event handlers (using Handlebars for templating)

Answer 1

更新：“流星之道”

如果您正在寻找 Blaze 如何为事件和帮助程序获取此数据上下文，那么会发现有一个神奇的 Blaze.getData() 函数，它采用 Blaze 视图或 DOM 对象并返回其数据语境。据我通过查看代码可以看出，它似乎是 Blaze 用于为助手和事件提供数据上下文的工具。

所以在你的情况下，你可以使用：

  Template.SideNav.onRendered(function() {
    this.$('.block-items').sortable({
      update: function (e, ui) {
        _.each($('.block-item'), function (blockItem) {
          var context = Blaze.getData(blockItem.get(0));
          var blockId = context._id;
        })
        console.log("block item rearranged");
      }
    });

---

原答案

在使用 DOM 操作（除了 blaze 事件）时，获取文档 id 的一种简单方法是将其显式设置为模板中的属性，例如：

<template name="SideNav">
  <ul class='block-items white'>
    {{#each blocks}}
      <li class='block-item' id='{{_id}}'>
        <i class="fa fa-fw fa-folder"></i>
        <i class="fa fa-fw fa-folder-open"></i>
        <a href='#' class='block-item-link'>
          {{name}}
     ...
     {{/each blocks}}
</template>

这样，您可以使用 jquery 的 attr 方法获取 id：

  Template.SideNav.onRendered(function() {
    this.$('.block-items').sortable({
      update: function (e, ui) {
        _.each($('.block-item'), function (blockItem) {
          var blockId = blockItem.attr('id');
        })
        console.log("block item rearranged");
      }
    });