I am really new to jsRender (just a couple of days) and I can just say. I like it!
One article I found very helpful was this one by john papa
So far, I could do what I want (all on one page), but one thing that John says in his article:
If the template is indicated inside the tag on the same page that it was used, then the template cannot be used as reusable.
made me try and see if it can move all my templates to separate files.
Following John’s instructions, I created a jsrender.utils.js file that retrieves the template using the $.get function.
Now the problem is that it only works for templates that don't call other templates from the inside, like my template:
_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>
Here I need to call other templates, such as: #if, #else and #dropdown
All of them are very simple and work great when directly called.
_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>
When I call the template "_estructura.tmpl.html", which in turn calls the dropdown , if and else templates, it just does the logic inside these templates (I think because it cannot find them)
this is what 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);
and here is the data for the two drop-down 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"}];
As I said at the beginning, I'm really new to jsrender, and it would be just amazing if you could help solve this problem.
Thanks in advance.