Question

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

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

Ex 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}}

Ex对象：

{
    "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

根据我对您的问题的理解，您正在尝试检查范围内是否存在属性。我们实际上可以在没有助手的情况下使用烘焙到Handlebars中的路径系统来完成此操作。

试试这个模板并告诉我这是否符合要求（否则你能给出预期的输出）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'));
    }
}

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

3 个答案: