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

本文介绍了jsRender - 如何从嵌套模板调用外部模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我是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 :让我想尝试看看是否可以将我的所有模板移动到单独的文件中。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和#dropdownHere 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_dataand 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 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 - 如何从嵌套模板调用外部模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！