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

Question

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

Одна статья, которую я нашел очень полезным был this one Джоном папаши

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

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

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

Следуя инструкциям Джона, я создал файл jsrender.utils.js, который извлекает шаблон с помощью функции $.get.

Теперь проблема заключается в том, что она работает только для шаблонов, которые doens't вызывать другие шаблоны внутри, как мой шаблон:

_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> 

Когда я называю «_estructur a.tmpl.html «шаблон, который в свою очередь вызывает dropdown, if и else шаблоны это просто doenst сделать логику внутри этих шаблонов (я думаю, потому что он не может найти их)

вот то, как я называю» _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, и это было бы просто потрясающе, если бы вы могли справиться с этой проблемой.

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

Answer 1

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

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

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

Вы должны загрузить все ваши шаблоны перед вызовом визуализации() или ссылка(). Ваш вызов renderExternalTemplate() должен вернуть обещание, и тогда вы объединяете все такие обещания в $.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); 
    }); 
}