Question

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

{{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);
});

我做错了什么？

Answer 1

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

您无法在模板或帮助程序中执行任何类型的DOM检查。在Handlebars中，此类检查应基于上下文，这意味着您应将已准备好的数据传递到模板，然后只使用#if语句：

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

使用Handlebars或其他无逻辑模板时的良好做法是将当前模板的状态存储在某处并且只能使用它。你得到DOM事件=＆gt; update state =＆gt;重新渲染模板，您可以更改数据（例如，通过AJAX）=＆gt; update state =＆gt;重新渲染模板，等等。

状态可以是MVC术语中的模型，或者是一个单独的实体，它并不重要。关键的想法是将状态保持在模板本身之外并仅在应用程序中操纵它。它是无逻辑方法的核心概念，IMO。

顺便说一下，有一个名为HTMLBars的Handlebars fork，它与DOMFragments而不是字符串一起使用。看看，也许这就是你会感到满意的。

把手帮助检查活动课程

1 个答案: