Question

我有一个简单的表，每行有2列：名称和布尔值。 busStopId和selected字段继承自父上下文中的{{#each}}块，如下所示：

<template name="selectionTable">
    ...
    {{#each busStops}}
      {{>selectDoc doc}}
    {{/each}}
    ...
</template>

<template name="selectDoc">
  <tr>
    <td>{{getName ../busStopId}}</td>
    <td>{{../selected}}</td>
  </tr>
</template>

当我将鼠标悬停在tr上时，我希望得到用于计算该特定行的busStopId。我的问题是我无法在模板上下文中找到它。我知道所有父数据都存在于template.parent().data中，但我需要专门针对我将要悬停的行的数据。我想它看起来像这样：

Template.selectDoc.events({
  'mouseenter tr': function (event,template) {
    console.log(template.?data?.busStopId);
  }
});

希望比我聪明的人可以填写?data?部分或提供解决方法（最糟糕的情况是我可以在DOM中包含busStopId并从event抓取它，但我更愿意学习如何以正确的方式去做。）

Answer 1

对于其他与这个看似简单的问题作斗争的人来说，这是我的解决方案：

Template.selectDoc.helpers({
  name: function(busStopId) {
    Template.instance().busStopId = busStopId;
    return BusStops.findOne(busStopId).name;
  }
});

Template.selectDoc.events({
  'mouseenter tr': function (e, template) {
    console.log(template.busStopId);
  }
});

如图所示，我手动将busStopId附加到帮助程序内的模板。然后，我在事件中将其从模板中拉出来。仍然很hacky，但它保持我的HTML清洁。

理想情况下，我认为将{{#each}}索引保存到模板会非常棒，因此我可以使用它直接从.parent().data抓取，但平均时间为2行并不是太糟糕。

Answer 2

我认为在这种情况下，将id作为数据属性存储在DOM元素上是完全正常的。

这是一个有效的Meteor Pad示例： http://meteorpad.com/pad/RbwwTvMugycM5zYLg/Using%20data-attr%20to%20store%20values

这是代码：

<template name="leaderboard">
  <ol class="leaderboard">
    {{#each players}}
      {{> player}}
    {{/each}}
  </ol>

  Their score : 
  <div id="score"></div>
</template>

<template name="player">
  <div id='{{_id}}' data-score='{{score}}' class='player'>
  {{name}}
  </div>
</template>

Template.player.events({
  'mouseover div': function (e) {
    $('#score').html( $(e.target).attr('data-score') );
  }
});

为什么你觉得在这样的dom中存储属性不是一个好的解决方案？我一直都在使用它。

在Blaze.TemplateInstance中查找父上下文

2 个答案: