js 嵌套的html模板 javascript – jsRender – 如何从嵌套模板调用外部模板

我是jsRender的新手(只有几天),我只能说..我喜欢它！

我发现一篇非常有用的文章是john papa的this one

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

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.

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

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

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

_estructura.tmpl.html

{{!------------------------------Start - Estructure------------------------}}

"Estructura para Retorno {{>nivelEst}}"

Tipo Expresion

{{for tipoExp tmpl="#dropdown" /}}

{{!-------------------------Start- Sentence-----------------------}}

{{for subTipoExp tmpl="#dropdown" /}}

{{!-----------------Start - Expression--------------------}}

{{if idSent tmpl="#if" /}}

{{if idSent tmpl="#else" /}}

{{!----------------------End - Expression----------------}}

{{!-------------------------End - Sentence -------------------------}}

{{!----------------------------End - Estructure -------------------------}}

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

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

_dropdown.tmpl.html

{{>text}}

_if.tmpl.html

IF(

:)

_else.tmpl.html

Else()

当我调用“_estructura.tmpl.html”模板时,该模板又调用下拉列表,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很新,如果能帮助解决这个问题,那就太棒了.

提前致谢.

解决方法:

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

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

以下是它在sample中的完成方式：

function showPeople(people) {

$.when(

lazyGetTemplate("people"),

// '

{{:name}} lives in {{for address tmpl="address" /}} '

// fetched from /samples/resources/templates/people.js

lazyGetTemplate("address")

// Template: '{{>city}}'

// fetched from /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);

});

}

标签：javascript,jquery,jsrender

来源： https://codeday.me/bug/1007/1864163.html