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小部件），但我对subtemplate变得疯狂....

我已经尝试了很多解决方案，但没有任何工作......

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

感谢

Answer 1

在回答关于从字符串编译模板的问题之前，这里有一个建议来简化你的＆＃34; jstemplate＆＃34;：

而不是

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

你可以写：

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

要从字符串中注册模板，请查看此页面：http://www.jsviews.com/#d.templates。您将在＆＃34;注册多个模板＆＃34; 上看到一个部分和一个示例。

遵循该模式，您可以从字符串中将所有三个模板注册为命名模板：

$.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>'
});

然后致电：

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

或者，如果您不想全局注册模板，可以将第二个和第三个模板注册为第一个模板的子模板，第一个模板可以编译为模板对象，而无需注册按名字。为了递归调用子模板中的第一个模板，您可以按名称注册第一个模板，并将其称为{{for children tmpl="jstemplate"/}}，或者只是将其保留为对象，但是传递{{1} }作为帮助者对象：jstemplate，并将其称为：jstemplate.render(NO.Nodes, {jstemplate: jstemplate})

（请参阅同一页面：http://www.jsviews.com/#d.templates - 关于将私人资源与模板关联的部分。）

这会给你：

{{for children tmpl=~jstemplate/}}

这是另一种变体 - 我简化了模板，以便更容易地显示模板和初始模板的递归调用之间的关系。这里将初始模板作为模板参数提供给递归调用的子模板：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}} ({{:Size}} {{:NbFiles}} fichier(s))&nbsp{{:Lock}}' + '<ul>{{for children tmpl=~jstemplate/}}</ul></li>', jsfiletemplate: '<li data-jstree=\'{"type":"{{:ClassName}}"}\' data-fold="{{:IsFolder}}" data-path="{{:RP}}">' + ' ' + '\').FileSelected(\'{{:RP}}\',\'{{:Nom}}\');" style="vertical-align:middle">{{:Nom}} ' + '({{:Size}} {{:LastModif}}) {{:Lock}}</li>' } }) $('#MyDiv').html('<ul>' + jstemplate.render(NO.Nodes, {jstemplate: jstemplate}) + '</ul>');然后使用~toptmpl=#tmpl调用：

{{for children tmpl=~toptmpl/}}

jsrender嵌套模板与字符串标记

1 个答案: