jsrender帶字符串標記的嵌套模板

Question

我是jsrender的新手。我書面方式模板與腳本標記一個自定義的樹狀見上：

<script id="jstemplate" type="text/x-jsrender"> 
     {{if IsFolder}}{{include tmpl="#jsfoldertemplate"/}}{{else}}{{include tmpl="#jsfiletemplate"/}}{{/if}} 
</script> 

<script id="jsfoldertemplate" type="text/x-jsrender"> 
    <li data-jstree='{"type":"{{:ClassName}}"}' data-fold="{{:IsFolder}}" data-path="{{:RP}}">{{:Nom}}&nbsp;<span style="font-size:smaller">({{:Size}}&nbsp;{{:NbFiles}}&nbsp;fichier(s))&nbsp<span>{{:Lock}}</span></span> 
     <ul> 
      {{for children tmpl="#jstemplate"/}} 
     </ul> 
    </li> 
</script> 

<script id="jsfiletemplate" type="text/x-jsrender"> 
    <li data-jstree='{"type":"{{:ClassName}}"}' data-fold="{{:IsFolder}}" data-path="{{:RP}}"> 
     <span {{:InspectorInfo}} class="SpanEtat {{:Inspector}}"></span>&nbsp; 
     <span class="ui-link" onclick="$get('<%=Me.ClientID%>').FileSelected('{{:RP}}','{{:Nom}}');" style="vertical-align:middle">{{:Nom}}</span>&nbsp; 
     <span style="font-size:smaller">({{:Size}}&nbsp;{{:LastModif}})&nbsp;<span>{{:Lock}}</span></span> 
    </li> 
</script> 

而且在我的js代碼之後：

$(#MyDiv').html('<ul>' + $('#jstemplate').render(NO.Nodes) + '</ul>'); 

這就是做工精細

現在我希望把這個模板在一個字符串（寫一個jqm部件），但我變得瘋狂的子模板...

我試了很多解決方案，但沒有工作....

如果有人有任何想法......？

感謝

Answer 1

之前回答你的問題有關從字符串編譯模板，這裏有一個建議，以簡化你的 「jstemplate」：

而不是

{{if IsFolder}}{{include tmpl="#jsfoldertemplate"/}}{{else}}{{include tmpl="#jsfiletemplate"/}}{{/if}} 

你可以寫：

{{if IsFolder tmpl="#jsfoldertemplate"}}{{else tmpl="#jsfiletemplate"}}{{/if}} 

對於從字符串註冊模板，需要一個lo好的在這個頁面：http://www.jsviews.com/#d.templates。您將在「註冊多個模板」上看到一個部分和示例。另外

$('#MyDiv').html('<ul>' + $.render.jstemplate(NO.Nodes) + '</ul>'); 

，如果你不想：

按照這種模式，你可以註冊所有三個模板作爲命名模板，從字符串：

$.templates({ 
    jstemplate: '{{if IsFolder tmpl="jsfoldertemplate"}}{{else tmpl="jsfiletemplate"}}{{/if}}', 
    jsfoldertemplate: '<li data-jstree=\'{"type":"{{:ClassName}}"}\' data-fold="{{:IsFolder}}" data-path="{{:RP}}">{{:Nom}}&nbsp;<span style="font-size:smaller">({{:Size}}&nbsp;{{:NbFiles}}&nbsp;fichier(s))&nbsp<span>{{:Lock}}</span></span>' 
    + '<ul>{{for children tmpl="jstemplate"/}}</ul></li>', 
    jsfiletemplate: '<li data-jstree=\'{"type":"{{:ClassName}}"}\' data-fold="{{:IsFolder}}" data-path="{{:RP}}">' 
    + '<span {{:InspectorInfo}} class="SpanEtat {{:Inspector}}"></span>&nbsp;' 
    + '<span class="ui-link" onclick="$get(\'<%=Me.ClientID%>\').FileSelected(\'{{:RP}}\',\'{{:Nom}}\');" style="vertical-align:middle">{{:Nom}}</span>&nbsp;' 
    + '<span style="font-size:smaller">({{:Size}}&nbsp;{{:LastModif}})&nbsp;<span>{{:Lock}}</span></span></li>' 
}); 

，然後調用全局註冊模板，您可以將第二個和第三個模板註冊爲第一個模板的子模板，並且可以將第一個模板編譯爲模板對象，而無需通過名稱進行註冊。爲了以遞歸方式從子模板中調用第一個模板，您可以按名稱註冊第一個模板，並將其稱爲{{for children tmpl="jstemplate"/}}，或者將其保留爲對象，但將該對象作爲幫助器傳遞給對象：jstemplate.render(NO.Nodes, {jstemplate: jstemplate}) ，並調用它像這樣：{{for children tmpl=~jstemplate/}}

（見同頁：http://www.jsviews.com/#d.templates - 章節上關聯的私人資源，模板）

這就給了你：

var jstemplate = $.templates({ 
     markup: '{{if IsFolder tmpl="jsfoldertemplate"}}{{else tmpl="jsfiletemplate"}}{{/if}}', 
     templates: { 
     jsfoldertemplate: '<li data-jstree=\'{"type":"{{:ClassName}}"}\' data-fold="{{:IsFolder}}" data-path="{{:RP}}">{{:Nom}}&nbsp;<span style="font-size:smaller">({{:Size}}&nbsp;{{:NbFiles}}&nbsp;fichier(s))&nbsp<span>{{:Lock}}</span></span>' 
      + '<ul>{{for children tmpl=~jstemplate/}}</ul></li>', 
     jsfiletemplate: '<li data-jstree=\'{"type":"{{:ClassName}}"}\' data-fold="{{:IsFolder}}" data-path="{{:RP}}">' 
      + '<span {{:InspectorInfo}} class="SpanEtat {{:Inspector}}"></span>&nbsp;' 
      + '<span class="ui-link" onclick="$get(\'<%=Me.ClientID%>\').FileSelected(\'{{:RP}}\',\'{{:Nom}}\');" style="vertical-align:middle">{{:Nom}}</span>&nbsp;' 
      + '<span style="font-size:smaller">({{:Size}}&nbsp;{{:LastModif}})&nbsp;<span>{{:Lock}}</span></span></li>' 
    } 
}) 

$('#MyDiv').html('<ul>' + jstemplate.render(NO.Nodes, {jstemplate: jstemplate}) + '</ul>'); 

這裏是另一個變體 - 我簡化了模板，以便更容易地顯示模板之間的關係和初始模板的遞歸調用。這裏最初的模板被提供給子模板遞歸調用作爲模板參數：~toptmpl=#tmpl，然後使用{{for children tmpl=~toptmpl/}}稱爲：

var jstemplate = $.templates({ 
     markup: '{{if IsFolder tmpl="jsfoldertemplate" ~toptmpl=#tmpl}}{{else tmpl="jsfiletemplate"}}{{/if}}', 
     templates: { 
     jsfoldertemplate: '<li>{{:Nom}} fichiers<ul>{{for children tmpl=~toptmpl/}}</ul></li>', 
     jsfiletemplate: '<li>{{:Nom}}</li>', 
     } 
    }); 

$('#MyDiv').html('<ul>' + jstemplate.render(NO.Nodes) + '</ul>');