Handlebars.js: Конструировать, чтобы увидеть, содержит ли узел Object дочерние элементы?

Я хочу добавить data-attribute в элемент списка, основываясь на том, содержит ли объект, который он отображает, определенного дочернего узла.

Детский узел, на который я хочу проверить, - source.menu.[0].menu.menu.text (плохо структурированный, я знаю)

Ex HTML:

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

Ex Object:

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

Добавлен объект для ясности.

Благодарю!

3 ответа

Видимо, я смотрел на это неправильно.

Из-за общей структуры данных я могу просто проверить, содержит ли объект {{link}} а если нет, то я знаю там детей.

{{#each source.menu.[0].menu}}
 <ul>
 {{#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.

Попробуйте этот шаблон и сообщите мне, если это то, что вам нужно (иначе вы можете дать ожидаемый результат) http://jsbin.com/aluhupI/2/edit

{{#each menu}}
 <ul>
 {{#each menu}}
 <li data-contains="{{#if ../text}}true{{else}}false{{/if}}">{{text}}</li>
 {{/each}}
 </ul>
{{/each}}


Рулевое управление меньше по дизайну, поэтому вы можете сделать что-то вроде этого:

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

Который может быть использован как это (включая настройки выше):

{{#each source.menu.[0].menu}}
 <ul>
 {{#each menu}}
 <li data-contains="{{exists ../text}}">{{text}}</li>
 {{/each}}
 </ul>
{{/each}}

licensed under cc by-sa 3.0 with attribution.