使用Handlebars.js和require.js遞歸部分

Question

我想使用Handlebars呈現節點的層次結構。我使用require.js和plugin for Handlebars來提取相關模板。我試圖調用一個部分遞歸地失敗。

樣本數據

var data = { 
    nodes: [ 
     { 
      title: "node 1", 
      nodes: [ 
       {title: "node 1-1"}, 
       {title: "node 1-2"} 
      ] 
     }, 
     { 
      title: "node 2" 
     } 
    ] 
}; 

需要調用

require(['hbs!templates/linker/sub'], function(tpl) { 
    console.log(tpl(data)); 
}); 

基本模板
模板/連接器/子

{{#if nodes}} 
<ul> 
    {{#each nodes}} 
     <li>{{title}} 
     </li> 
    {{/each}} 
</ul> 
{{/if}} 

輸出（成功）

<ul> 
    <li>node 1</li> 
    <li>node 2</li> 
</ul> 

具有部分
模板/接頭/ SUB2模板，調用先前模板作爲部分

{{#if nodes}} 
<ul> 
{{#each nodes}} 
    <li>{{title}} 
     {{> templates_linker_sub }} 
    </li> 
{{/each}} 
</ul> 
{{/if}} 

輸出（成功）

<ul> 
    <li>node 1 
     <ul> 
      <li>node 1-1</li> 
      <li>node 1-2</li> 
     </ul> 
    </li> 
    <li>node 2</li> 
</ul> 

用遞推偏
模板/接頭/ SUB3模板，調用本身作爲部分

{{#if nodes}} 
<ul> 
{{#each nodes}} 
    <li>{{title}} 
     {{> templates_linker_sub3 }} 
    </li> 
{{/each}} 
</ul> 
{{/if}} 

輸出（失敗）

require.js超時，沒有輸出。

我錯在假設我可以在此設置中使用遞歸partials？或者我在寫模板時錯過了什麼？

Answer 1

我知道這是很老了，但我只是創造了一個拉請求，要求，handlebars-插件回購，將解決問題。目前，該插件將解析部分並添加所有引用的部分作爲依賴關係（因此創建一個循環引用。） 請參閱：https://github.com/SlexAxton/require-handlebars-plugin/pull/229

Answer 2

作爲一種解決方法，我定義了一個自定義幫助器來應用先前註冊的部分。該部分已被編譯並可以通過Handlebars.partials

define(['Handlebars', 'underscore'], function (Handlebars, _) { 
    function partial(template, context, options) { 
     var f = Handlebars.partials[template]; 
     if (!_.isFunction(f)) { 
      return ""; 
     } 

     return new Handlebars.SafeString(f(context)); 
    } 
    Handlebars.registerHelper('recursivepartial', partial); 
    return partial; 
}); 

我修改的模板看起來像

{{#if nodes}} 
<ul> 
{{#each nodes}} 
    <li>{{title}} 
     {{recursivepartial "templates_linker_sub" this}} 
    </li> 
{{/each}} 
</ul> 
{{/if}}