javascript - 我们如何将 html 元素作为参数传递给 handlebar helper 以实现显示更多/更少的功能

Question

我有一个场景可以根据助手处理程序中的条件将类名动态添加到特定元素。下面是我正在使用的代码

<table class="table table-striped" id="mytab">
     <tbody>
          {{#each records}}
          <tr id="abc"> {{ showMore $this }}
              <td>{{formatDate this.StartDateTime }}
              </td>
          </tr>
          {{/each}}
     </tbody>
</table>

我想通过' <tr> ' 元素作为 'showMore' 辅助处理程序的参数。

已添加——下面是我的处理程序代码:

Handlebars.registerHelper('showMore', function(ele,options) {
    var index = options.data.index;
});

在上面的函数中我需要访问html元素

Answer 1

我不确定您是否可以访问 <tr>从 Handlebars 助手中。但是，将类动态添加到 Handlebars 模板中的元素的一种方法是执行此操作(请注意，处理程序引用在 class 的 <tr> 属性值中)。

<table class="table table-striped" id="mytab">
     <tbody>
          {{#each records}}
          <tr id="abc" class="{{showMore}}"> 
              <td>{{formatDate this.StartDateTime }}
              </td>
          </tr>
          {{/each}}
     </tbody>
</table>

然后调整你的 showMore帮助程序输出适用于当前记录的任何类名。如果有时不需要类名，则结果为空 class=""不应该伤害任何东西。

请注意，您不需要传递 this给助手，因为助手会自动将当前上下文接收为 this函数的上下文。