Question

在Handlebars中，我循环遍历列表，并根据以下值构建表：

<table class="table table-striped table-condensed">
    <thead>
        <tr>
            {{#each header}}
                <th data-id="{{@index}}" style="cursor: pointer">{{this.label}} <i class=" icon-resize-vertical"></i></th>
            {{/each}}
        </tr>
    </thead>
    <tbody>
        {{#each objects}}
            <tr>
                {{#each this.properties}}
                    <td>
                        {{#if @first}}
                            <a data-id="{{subIndex ../../this}}">{{this}}</a>
                        {{/if}}
                        {{#unless @first}}
                            {{#if this}}
                                {{this}}
                            {{/if}}
                        {{/unless}}
                    </td>
                {{/each}}
            </tr>
        {{/each}}
    </tbody>
</table>

给我带来问题的部分是：

{{#unless @first}}
    {{#if this}}
        {{this}}
    {{/if}}
{{/unless}}

本节的目的是首先检查循环中的当前值是否为空，如果它不为null，则显示它。否则，只需跳过它。但是，这输出

[object Window]

好像this的值在某种程度上没有绑定到循环中的当前位置。

我的问题基本上是，我是否需要以其他方式检查空值？

Answer 1

你找到了解决方案吗？我遇到了同样的问题，解决方案是创建一个把手助手。我第一次尝试这个，我只是添加了一个条件来检查null。原来这个的值被设置为编译时的窗口实例，所以只需更改条件以检查Window的实例。

Handlebars.registerHelper('notNull', function(value, options) {
    if((value instanceof Window) == false) {
        return options.fn(this);
    }
    return options.inverse(this);
});

这适用于以下手柄代码

{{#notNull this}}
    {{this}}
{{/notNull}}

Answer 2

我使用了一个助手作为过滤器功能。像这样：

Handlebars.registerHelper({
    'notNull': function(value, options) {

    if(!Handlebars.Utils.isArray(value)){
        return [];
    } else {
        return value.filter(function(ele){
            return !Handlebars.Utils.isEmpty(ele);
        });
    }
}

车把代码：

{{#each (notNull elements)}}
    {{this}}
{{/each}}

在上下文中：

{elements:[{...},{...},{...},{...}]}

我不得不使用此解决方案，因为有时读取数组可能包含空元素。在这种情况下，原始数组将减少为非空元素。

例如在 Handlebars 4.0.12 中运行此程序：

{
    "elements": [{
            "unid": "1AB9BD4361CC9C2FC125832E00378BBF"
        }, {
            "unid": "4B8D99F9775B2E93C1258329002E8297"
        }, {
            "unid": "BFFA0EB7B3384AF7C1258328003758D0"
        }, {
            "unid": "7EDFA3EA1B588028C125832700378438"
        },
        null
    ]
}

{{#each (notNull elements)}}
    {{this.unid}}
{{/each}}

产生：

   1AB9BD4361CC9C2FC125832E00378BBF
   4B8D99F9775B2E93C1258329002E8297
   BFFA0EB7B3384AF7C1258328003758D0
   7EDFA3EA1B588028C125832700378438

在每个循环的Handlebars中跳过NULL值

2 个答案: