【问题标题】:How to check whether object is empty in handlebars if statement?如何检查车把if语句中的对象是否为空?
【发布时间】:2016-02-01 12:39:14
【问题描述】:

在车把中,我需要检查一个对象是否为空,如果不是,则我需要运行一个循环来从对象中获取内容。下面是我的代码和codepen的链接。我想这很简单,但似乎没有任何效果。我原以为把手 #if 语句会将空对象视为未定义或 0,最终条件将无法满足。

<div class="temp"></div>

<script id="temp" type="x-handlebars-template">
    {{#if tabs}}
    <p>true</p>
    {{/if}}
</script>

var template = Handlebars.compile($("#temp").html());

var tabs = {};

var context = {
    tabs: tabs
}

$('.temp').html(template(context));

http://codepen.io/matt3224/pen/gaKyKv?editors=101

【问题讨论】:

    标签: javascript loops if-statement handlebars.js


    【解决方案1】:

    您可以只使用内置的把手 each 助手来完成您要查找的内容,甚至可以使用空对象有条件地渲染某些内容:

    var template = Handlebars.compile($("#temp").html());
    
    var tabs = {},
        test = {a: "Resources", b: "Contact"};
    
    var context = {
        tabs: tabs,
        test: test
    }
    
    $('.temp').html(template(context));
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js"></script>
    
    <div class="temp"></div>
    
    <script id="temp" type="x-handlebars-template">
        <h3>each helper on empty object</h3>
        {{#each tabs}}
            <p>Key: {{@key}} Value = {{this}}</p>
        {{else}}
            <p>Your tabs object is empty!</p>
        {{/each}}
        
        <h3>each helper on non-empty object</h3>
        {{#each test}}
            <p>Key: {{@key}} Value = {{this}}</p>
        {{else}}
            <p>Your test object is empty!</p>
        {{/each}}
    </script>

    【讨论】:

    • 谢谢你,但我已经在使用 each,我的部分标记需要存在于 each 之外。这意味着我必须使用 2 个,如果有数据,则显示比我需要的更多的标记。所以我确实需要一个 if 或自定义助手。 codepen.io/matt3224/pen/gaKyKv?editors=101
    • 只是对象为空时需要隐藏类吗?如果是这样,您可以将 class="..." 包装在 if 助手中。如果不是,您能否举例说明您希望生成的标记在空对象和非空对象情况下分别看起来像什么?
    • 嗨尼克,有没有在不使用 each 帮助器的情况下检查对象是否为空?如您所示,我不能只使用 each 帮助器的原因是因为我有一个包装器,如果对象为空,我不想输出。检查最新的 codepen,您应该能够从标记中看到我的问题。我也会添加一些cmets。非常感谢您在这方面的帮助。
    • 不幸的是,我认为在车把中没有一种简单的方法可以做到这一点,因为 {} 和 {a: "test"} 在 if/@ 中都被认为是“真实的” 987654329@ 助手,同样在 with 助手中。您的选择是 1) 构建自定义助手,或 2) 使用其他人已经构建的助手,例如assemble.io/helpers/helpers-collections.html#-empty-,但我认为仅使用核心把手库是不可能的。如果对象只是不存在,而不是存在并且为空,那会容易得多。
    猜你喜欢
    • 2012-07-08
    • 1970-01-01
    • 2022-11-22
    • 1970-01-01
    • 2015-02-16
    • 2017-05-06
    • 2023-04-08
    • 2022-01-17
    • 2013-10-11
    相关资源
    最近更新 更多