我对 jsRender 真的很陌生(才几天),我只能说..我喜欢它!
我发现真正有用的一篇文章是this one作者:约翰·帕帕
到目前为止,我已经能够做我想做的事(同一页面中的所有内容),但约翰在他的文章中说了一件事:
如果模板是在同一页面的标签内定义的
如果它已被使用,那么该模板就无法像它应有的那样可重用。
让我想尝试看看是否可以将所有模板移动到单独的文件中。
按照约翰的指示我创建了一个jsrender.utils.js
使用以下命令检索模板的文件$.get
功能。
Now 问题是它仅适用于不从内部调用其他模板的模板,例如我的模板:
_estructura.tmpl.html
<tr>
<td>
{{!------------------------------Start - Estructure------------------------}}
<fieldset id="e{{>nivelEst}}">
<legend>"Estructura para Retorno {{>nivelEst}}"</legend>
<div>
<span>Tipo Expresion</span>
<select id="tipoExp_e{{>nivelEst}}">
{{for tipoExp tmpl="#dropdown" /}}
</select>
</div>
<hr />
{{!-------------------------Start- Sentence-----------------------}}
<fieldset id="{{>idSent}}">
<div>
<select id="subTipoExp_{{>idSent}}">
{{for subTipoExp tmpl="#dropdown" /}}
</select>
</div>
<br />
<div>
{{!-----------------Start - Expression--------------------}}
<table id="tbExp_{{>idSent}}" class="list" align="center" cellpadding="0" cellspacing="0">
<tbody>
{{if idSent tmpl="#if" /}}
</tbody>
<tfoot>
{{if idSent tmpl="#else" /}}
</tfoot>
</table>
{{!----------------------End - Expression----------------}}
</div>
</fieldset>
{{!-------------------------End - Sentence -------------------------}}
</fieldset>
{{!----------------------------End - Estructure -------------------------}}
</td>
</tr>
这里我需要调用其他模板,例如:#if、#else 和 #dropdown
它们都非常简单并且直接调用时可以完美工作
_dropdown.tmpl.html
<option value="{{>value}}">{{>text}}</option>
_if.tmpl.html
<tr>
<td>
<span class="rightAlig">IF(</span><input type="text" id="exp1_tbExp_{{>idSent}}" class="conditionInput" />
</td>
<td>
:<input type="text" id="ret1_tbExp_{{>idSent}}" />)
</td>
<td>
</td>
</tr>
_else.tmpl.html
<tr>
<td colspan="3" style="text-align: left;">
<input type="button" id="btnAñadir_tbExp_{{>idSent}}" value="+ Add" class="button small blue" />
</td>
</tr>
<tr>
<td colspan="3">
<span>Else</span>(<input type="text" id="else_tbExp_{{>idSent}}" />)
<input type="hidden" id="c_tbExp_{{>idSent}}" value="1" />
</td>
</tr>
当我调用“_estructura.tmpl.html”模板时,该模板又调用dropdown
, if
, and 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 非常陌生,如果你能帮助解决这个问题,那就太棒了。
提前致谢。