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

我想添加一个data-attribute列表项目的基础上，如果它显示的对象包含某个子节点。Handlebars.js：构造查看对象节点是否包含子对象？

我期待检查的子节点是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"} 
          ] 
         } 
        ] 
       } 
      ] 
     } 
    ] 
}

为清晰起见添加了该对象。

谢谢！

来源

2014-01-07 Christopher Marshall

你可以给我们一个示例上下文对象，因为我认为你的模板也可能有其他一些问题 – megawac

Addded the object！我正在使用source.menu。[0]因为我有两个独立的车把模板，并一次渲染一个（Soil and Surface） –

因此，您试图验证子菜单，例如'“菜单”：[ {“text”：“Product E “，”link“：”/ url/to/product/e“} ]'有一个带有prop文本的孩子？ – megawac

显然，我一直在寻找这个错误的方式。

由于通用的数据结构，我可以检查对象是否包含{{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')); 
    } 
}

来源

2014-01-08 22:25:04

把手是逻辑设计少，所以你可以做这样的事情：

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

来源

2014-01-07 21:12:51 Niall

将该对象添加到问题！我也解释了为什么我在之前的评论中使用哈希值！感谢您一直以来的帮助！ –

啊我现在得到你。 Handlebars逻辑较少，与角度不同，所以你不能仅仅在html中添加一些javascript（你可能已经发现了）。所以你必须把它抽象成一个帮手。那有意义吗？ – Niall

@ChristopherMarshall我刚刚在那里评论过。 – Niall

从我的理解你的问题是你想检查一个属性是否存在于范围内。我们实际上可以做到这一点，而不需要帮助者使用烘焙到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}}

来源

2014-01-07 22:00:23 megawac

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

回答

相关问题