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：構造查看對象節點是否包含子對象？

回答

相關問題