带有字符串标记的 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}}

要从字符串注册模板，请查看此页面：http://www.jsviews.com/#d.templates。您将看到有关“注册多个模板”的部分和示例。

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

$.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"/}}或者仅将其保留为对象，但将该jstemplate对象作为 helper: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>');