jsRender - Как вызвать внешний шаблон из вложенного шаблона

Я действительно новичок в jsRender (всего пару дней), и я просто могу сказать ... мне это нравится!

Одна статья, которую я нашел действительно полезной, была этой от Джона Папы.

До сих пор я мог делать то, что хочу (все на одной странице), но Джон говорит в своей статье следующее:

Если шаблон определен внутри тега на той же странице, на которой он используется, то этот шаблон нельзя использовать повторно, как мог бы.

заставило меня захотеть попробовать и посмотреть, можно ли переместить все мои шаблоны в отдельные файлы.

Следуя инструкциям Джона, я создал файл 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, и было бы просто замечательно, если бы вы могли помочь с этой проблемой.

Заранее спасибо.


javascript jquery jsrender
person eddy    schedule 30.09.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Существуют разделы документации, в которых объясняется, как выполнять удаленную загрузку шаблонов:

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

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

Вам нужно загрузить все свои шаблоны перед вызовом render() или link(). Ваш вызов renderExternalTemplate() должен возвращать промис, а затем вы объединяете все такие промисы в $.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);
    });
}
person BorisMoore    schedule 01.10.2013
comment
люблю этот lazyGetTemplate метод Борис, спасибо. - person balexandre; 03.10.2013