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

Posted 2023-04-14

【中文标题】jsRender - 如何从嵌套模板调用外部模板

【英文标题】：jsRender - How to call an external template from a nested template

【发布时间】：2013-10-06 16:02:26

【问题描述】：

我对 jsRender 真的很陌生（只有几天），我只能说..我喜欢它！

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

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

如果模板是在同一页面的标签内定义的 如果它被使用了，那么模板就不能像它应该的那样可重用。

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

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

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

_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 和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 真的很陌生，如果你能帮助解决这个问题，那就太棒了。

提前致谢。

【参考方案1】：

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

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

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

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

这是在sample中完成的：

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);
    );

【讨论】：

喜欢lazyGetTemplate 方法鲍里斯，谢谢。