Question

是否可以知道调用全局帮助程序的HTML元素？

我有这个火焰模板：

<template name="tools">
  <div>
    <a id="pencil" class="{{toolIsActive}}">Pencil</a>
    <a id="shape" class="{{toolIsActive}}">Shape</a>
    <a id="poly" class="{{toolIsActive}}">Polygon</a>
    <a id="arrow" class="{{toolIsActive}}">Arrow</a>
  </div>    
</template>

所以它是一个有用的帮手：

UI.registerHelper('toolIsActive', function() {
    return (this.id === currentTool) ? 'active' : '';
});

我希望this成为调用HTML元素而不是模板的数据上下文。

有没有办法访问该元素？我知道我可以使用this.$('#pencil')，但它没用，因为它id正是我想知道的。

Answer 1

您可以通过将工具名称作为帮助程序的参数传递来解决此问题：

<a id="pencil" class="{{toolIsActive 'pencil'}}">Pencil</a>

UI.registerHelper('toolIsActive', function(tool) {
  return (tool === currentTool) ? 'active' : '';
});

由于这种帮助程序在应用程序的许多不同部分都很有用，所以你可以改为使用通用程序：

<a id="pencil" class="{{classIfEqual 'pencil' currentTool 'active'}}">Pencil</a>

UI.registerHelper('classIfEqual', function(a, b, className) {
  return (a === b) ? className : '';
});

Answer 2

另一种方法，可以使将来更容易添加更多工具：

<template name="tools">
  <div>
    {{#each tools}}
      <a id="{{id}}" class="{{toolIsActive}}">{{humanName}}</a>
    {{/each}}
  </div>
</template>

Template.tools.helpers({
  tools: [
    {id: "pencil", humanName: "Pencil"},
    {id: "shape",  humanName: "Shape"},
    {id: "poly",   humanName: "Polygon"},
    {id: "arrow",  humanName: "Arrow"}
  ],
  toolIsActive: function() {
    return (this.id === currentTool) ? "active" : ""
  }
});

您可以在多个地方使用该tools结构，然后如果您想添加更多工具，则只需将其添加到一个位置。

Meteor：获取使用全局帮助器的HTML元素

2 个答案: