jsRender – 如何从嵌套模板调用外部模板

我是jsRender的新手（只有几天），我只能说..我喜欢它！

我发现一篇非常有用的文章是约翰爸爸的这篇文章

到目前为止，我已经能够做我想要的事情（同一页面中的所有内容），但John在他的文章中说：

如果模板是在与其使用的同一页面中的标签内定义的，那么模板就不像它可能的那样可重复使用。

让我想尝试看看是否可以将我的所有模板移动到单独的文件中。

按照John的指示，我创建了一个jsrender.utils.js文件，该文件使用$.get函数检索模板。

现在的问题是它只适用于不会从内部调用其他模板的模板，比如我的模板：

_estructura.tmpl.html

    {{!------------------------------Start - Estructure------------------------}} 
nivelEst}}"> 
"Estructura para Retorno {{>nivelEst}}"
 
 Tipo Expresion nivelEst}}"> {{for tipoExp tmpl="#dropdown" /}}  
 
 {{!-------------------------Start- Sentence-----------------------}} 
idSent}}"> 
 idSent}}"> {{for subTipoExp tmpl="#dropdown" /}}  
 
 
 {{!-----------------Start - Expression--------------------}} idSent}}" class="list" align="center" cellpadding="0" cellspacing="0">  {{if idSent tmpl="#if" /}}  {{if idSent tmpl="#else" /}}  {{!----------------------End - Expression----------------}} 
 
 {{!-------------------------End - Sentence -------------------------}} 
 {{!----------------------------End - Estructure -------------------------}}   

在这里，我需要调用其他模板，例如：＃if，＃else和#dropdown

它们都很简单，直接调用时效果很好

_dropdown.tmpl.html

 value}}">{{>text}} 

_if.tmpl.html

   IF(idSent}}" class="conditionInput" />   :idSent}}" />)     

_else.tmpl.html

   idSent}}" value="+ Add" class="button small blue" />     Else(idSent}}" />) idSent}}" value="1" />   

当我调用“_estructura.tmpl.html”模板时，该模板又调用dropdown ， if和else模板，它只是执行这些模板中的逻辑（我想因为它找不到它们）

这是我如何调用“_estructura.tmpl.html”模板：

 var data_Est = new Object(); data_Est.nivelEst = counter; data_Est.idSent = idSent; data_Est.tipoExp = tipoEsp_data; data_Est.subTipoExp = subTipoEsp_data; my.utils.renderExternalTemplate("estructura", "#tbEstructuras >tbody", data_Est); 

这是主模板的两个下拉列表的数据：“tipoEsp_data”和“subTipoEsp_data”

 var tipoEsp_data = [{ "value": 1, "text": "Expresión Condicional" }, { "value": 2, "text": "Lógico/Matemática" }, { "value": 3, "text": "Matriz de doble Entrada" }, { "value": 4, "text": "Árbol de decisiones"}]; var subTipoEsp_data = [{ "value": 1, "text": "Si.Pero.Si" }, { "value": 2, "text": "Si" }, { "value": 3, "text": "Fórmula Matemática"}]; 

正如我在开始时告诉你的那样，我真的很喜欢jsrender，如果你能帮助解决这个问题，那就太棒了。

提前致谢。

Answer 1

有一些文档主题可以解释如何远程加载模板：

http://www.jsviews.com/#samples/jsr/composition/remote-tmpl

http://www.jsviews.com/#compiletmpl

您需要在调用render（）或link（）之前加载所有模板。 您的renderExternalTemplate()调用需要返回一个promise，然后您在$.when()组合所有这些promise。

以下是样本中的完成方式：

 function showPeople(people) { $.when( lazyGetTemplate("people"), // '
{{:name}} lives in {{for address tmpl="address" /}}
' // fetched from www.jsviews.com/samples/resources/templates/people.js lazyGetTemplate("address") // Template: '{{>city}}' // fetched from www.jsviews.com/samples/resources/templates/address.js ) .done(function() { // Render once all templates for template composition are loaded var html = $.templates.people.render(people); $("#peopleList").html(html); }); }