Handlebars.js：构造以查看对象节点是否包含子级？

Question

我想根据其显示的对象是否包含某个子节点，将data-attribute添加到列表项。

我要检查的子节点是source.menu.[0].menu.menu.text （我知道结构不良）

前HTML：

{{#each source.menu.[0].menu}}
    <ul class='list-{{@index}}'>
        {{#each menu}}
        <li data-contains='{{source.menu.[0].menu.menu has text == 'yes'}}'>{{text}}</li>
        {{/each}}
    </ul>
{{/each}}

前对象：

{
    "menu":
    [
        {
            "text": "Soil",
            "menu" :[
                {
                    "text": "Clogs",
                    "menu":[
                        {"text":"Product A", "link": "/url/to/product/a"},
                        {"text":"Product B", "link": "/url/to/product/b"},
                        {"text":"Product G", "link": "/url/to/product/b"}
                    ]
                },
                {
                    "text": "Drain",
                    "menu":[
                        {"text":"Product C", "link": "/url/to/product/c"},
                        {"text":"Product D", "link": "/url/to/product/d"}
                    ]
                },
                {
                    "text": "Appliances",
                    "menu":[
                        {
                            "text": "Microwave",
                            "menu":[
                                {"text":"Product E", "link": "/url/to/product/e"},
                                {"text":"Product D", "link": "/url/to/product/d"}
                            ]
                        },
                        {
                            "text": "Stove",
                            "menu":[
                                {"text":"Product H", "link": "/url/to/product/e"},
                                {"text":"Product I", "link": "/url/to/product/d"}
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "text": "Surface",
            "menu" :[
                {
                    "text": "Wood",
                    "menu" :[
                        {"text":"Product A", "link": "/url/to/product/a"},
                        {"text":"Product B", "link": "/url/to/product/b"}
                    ]
                },
                {
                    "text": "Granite",
                    "menu" :[
                        {"text":"Product C", "link": "/url/to/product/c"},
                        {"text":"Product D", "link": "/url/to/product/d"}
                    ]
                },
                {
                    "text": "Appliances",
                    "menu" :[
                        {
                            "text": "Microwave",
                            "menu" :[
                                {"text":"Product E", "link": "/url/to/product/e"},
                                {"text":"Product D", "link": "/url/to/product/d"}
                            ]
                        },
                        {
                            "text": "Stove",
                            "menu" :[
                                {"text":"Product E", "link": "/url/to/product/e"},
                                {"text":"Product D", "link": "/url/to/product/d"}
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

为清楚起见添加了对象。

谢谢！

Answer 1

车把在设计上不合逻辑，因此您可以执行以下操作：

Handlebars.registerHelper('exists', function(text) {
    return !!text
})

可以这样使用（包括上面的调整）：

{{#each source.menu.[0].menu}}
    <ul class='list-{{@index}}'>
        {{#each menu}}
            <li data-contains='{{exists ../text}}'>{{text}}</li>
        {{/each}}
    </ul>
{{/each}}

Answer 2

根据我对您问题的了解，您正在尝试检查范围中是否存在属性。 实际上，我们无需使用辅助工具中内置的路径系统就可以完成此操作。

试试这个模板，让我知道这是否是您想要的（否则您可以提供期望的输出） http://jsbin.com/aluhupI/2/edit

{{#each menu}}
    <ul class='list-{{@index}}'>
        {{#each menu}}
            <li data-contains='{{#if ../text}}true{{else}}false{{/if}}'>{{text}}</li>
        {{/each}}
    </ul>
{{/each}}

Answer 3

显然我是在以错误的方式看待这个问题。

由于具有通用的数据结构，因此我可以检查该对象是否包含{{link}} ，如果不包含，那么我知道有孩子。

{{#each source.menu.[0].menu}}
    <ul class='list-{{@index}}'>
        {{#each menu}}
        <li data-list-index='{{@index}}' data-product-url='{{link}}'>{{text}}</li>
        {{/each}}
    </ul>
{{/each}}


function checkForProductUrl(element) {
    if (element.data('product-url') === '' || null) {
        // Code to continue to next list
        var $activeListIndex;

        $('.list-second-level').animate({ 
            left: $listWidth}, 500);

        activeListIndex = element.data('list-index');
        $('#mask .list-third-level ul.list-' + activeListIndex).show();
        currentListLevel = 3;
    } else {
        displayProductInformation(element.data('product-url'));
    }
}