jsRender - 如何从嵌套模板调用外部模板 [英] jsRender - How to call an external template from a nested template
问题描述
我是jsRender的新手（只有几天），我只能说..我喜欢它！
I'm really new to jsRender(only a couple of days) and I just can say ..I love it!!
我发现一篇文章非常有用被john papa 这一个
One article I found really useful was this one by john papa
到目前为止，我已经能够做我想要的事情（同一页面中的所有内容），但约翰在他的文章中说了一句话：
So far I've been able to do what I want(everything in the same page), but one thing John says in his article :
如果在使用它的同一页
中的标签内定义了模板，那么模板就不像它可以重复使用。
If a template is defined inside of a tag in the same page that it’s used, then the template isn’t as reusable as it could be.
让我想尝试看看是否可以将我的所有模板移动到单独的文件中。
made me want to try and see if could move all my templates into separate files.
遵循John的指示我创建了一个 jsrender.utils.js 文件，该文件使用 $。get 函数检索模板。
Following John's instructions I created a jsrender.utils.js file that retrieves the template using the $.get function.
现在问题是它只适用于那些不会从内部调用其他模板的模板，例如我的模板：
_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
Here I need to call other templates such as : #if, #else, and #dropdown
它们都很简单，直接调用时效果很好
They all are very simple and work perfectly when called directly
_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模板时，该模板又调用下拉，如果， else 模板它只是做那些内部的逻辑模板（我猜是因为它找不到它们）
When I call the "_estructura.tmpl.html" template which in turn calls the dropdown, if, and else templates it just doenst do the logic inside those templates(I guess because it can't find them)
这就是我称之为_estructura.tmpl.html模板的方式：
here's is how I call the "_estructura.tmpl.html" template:
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
and here's is the data for the two dropdown lists of the main template: "tipoEsp_data" and "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，如果你能提供帮助，那就太棒了出了这个问题。
As I told you at the beginning I really new to jsrender and it would just amazing if you could help out with this problem.
提前致谢。
推荐答案
那里是解释如何远程加载模板的文档主题：
There are documentation topics that explain how to do remote loading of templates:
http://www.jsviews.com/#samples/jsr/composition/remote-tmpl
< a href =http://www.jsviews.com/#compiletmpl =nofollow> http://www.jsviews.com/#compiletmpl
您需要在调用render（）或link（）之前加载所有模板。你的 renderExternalTemplate（）调用需要返回一个promise，然后你将所有这些promises组合在一个 $。when（）。
You need to load all your templates before calling render() or link(). Your renderExternalTemplate() call needs to return a promise, and you then combine all such promises in a $.when().
以下是如何在示例：
function showPeople(people) {
$.when(
lazyGetTemplate("people"),
// '<div>{{:name}} lives in {{for address tmpl="address" /}}</div>'
// fetched from www.jsviews.com/samples/resources/templates/people.js
lazyGetTemplate("address")
// Template: '<b>{{>city}}</b>'
// 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);
});
}
这篇关于jsRender - 如何从嵌套模板调用外部模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
