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>');