0

我想检查我当前的元素是否处于活动状态

{{each}}
<div class="num">{{#isActive this}} show this {{/isActive}}</div>
{{/each}}

我创建了这个车把模板

Handlebars.registerHelper('isActive', function(element, options){
    if($(element).hasClass('active')){
         return options.fn(this);
    }
    return options.inverse(this);
});

我做错什么了？

4

1 回答 1

0

Handlebars 是一个基于字符串的模板，这意味着它只能处理和输出字符串。Handlebars 对您的环境一无所知（在这种情况下是 DOM）。因此，this在模板中只是一个当前上下文对象（模板的数据），而不是一个 DOM 节点。

您不能在模板或助手中进行任何类型的 DOM 检查。在 Handlebars 中，此类检查应该是基于上下文的，这意味着您应该将已经准备好的数据传递给您的模板，然后简单地使用#if语句：

{{each}}
<div class="num">{{#if isActive}} show this {{else}} show that {{/if}}</div>
{{/each}}

使用 Handlebars 或其他无逻辑模板时的良好做法是将当前模板的状态存储在某处并仅使用它。你得到 DOM 事件 => 更新状态 => 重新渲染模板，你得到改变的数据（例如通过 AJAX）=> 更新状态 => 重新渲染模板，等等。

状态可以是 MVC 术语中的模型，或者是这样一个单独的实体，这没关系。关键思想是将状态排除在模板本身之外，并且仅在应用程序中对其进行操作。它是无逻辑方法的核心概念，IMO。

顺便说一句，有一个名为HTMLBars的 Handlebars 分支，它与 DOMFragments 一起工作，而不是字符串。看看吧，也许你会满意。

于 2014-12-19T09:26:13.493 回答