jsRender - How to set the ID for the controls inside a template

Question

I'm really new to jsRender ,but since I found it really useful for populating my dropdown list (with just a couple of lines) I wanted to ask you if could use jsRender to create controls without displaying any data on those controls (at least not for now)

This is a simplified version of what I'm doing now concatenating several lines of html code

HTML code :

<table>
    <tr>
        <td>
            <fieldset id="fldRetorno">
                <legend>Return Details</legend>
                <input id="addRow" type="button" value="+ Add" />
                <table id="tbRetornosModelos" class="tabla-retorno">
                    <tbody></tbody>
                </table>
            </fieldset>
        </td>
    </tr>
</table>
</table>

JS code:

 var counter = 0; // Counter for number of rows     

 $("#addRow").on('click', function () {
     counter = counter + 1;

     var newName = "Name" + counter;
     var newType = "Type" + counter;

     var newEnlaceEstruct = "tbExp_s1_e" + counter;
     var newRow = '<tr><td>Return # ' + counter + ':  </td>' +
         '<td>' + '  Name</td>' +
         '<td><input type="text" id="' + newName + '" />' + '</td>' +
         '<td>Data Type</td>' +
         '<td><select name="select" id="' + newType + '"> <option value="Seleccione" selected>Select...</option> <option value="Number" >Number</option><option value="Text">Text</option></select></td>' +
         '<td><input type="button" value="-Remove" class="deleteFila"></td>' +
         '<td><input type="hidden" id="enlace' + counter + '" value="' + newEnlaceEstruct + '" /></td>' +
         '</tr>';
     $('table.tabla-retorno >tbody').append(newRow);

     $(".deleteFila").on("click", function (event) {
         $(this).closest("tr").remove();
     });
 });

jsfiddle for the simplified version http://jsfiddle.net/edaloicaro18/YURDR/2/

The part that concatenates all the columns into a row ,to then assign it the table append(newRow) is the one I want to get rid of. I had thought of using a template declared in a <script> tag , put all the ids in a json array and pass it to render method ,just as I do with my dropdown lists, and I'm almost sure that it will do.

But what shall I do when I have to edit (not insert like what I'm doing now) ?? Then I'll not only have to generate the ids for the controls but also have to display data in those controls. What shall I do then?? Does jsRender accept more than one datasource in the render method???

What would you do in such a case? Maybe I'm just making a mountain out of a molehill

Thanks for any help, Axel

P.S. Here is the complete version of what I need to do,just to give a better idea. http://jsfiddle.net/edaloicaro18/4yQML/25/embedded/result/ I think that if I find how to handle the simplified version, I wont have any problem with the complex one.

Answer 1

JsRender lets you pass any data you want to the render method, and also lets you pass helper methods and metadata etc in the additional context parameter:

myTemplate.render(data, context)

The API documentation for the render method is here

From the template you access the properties or methods of the context object as ~someProperty or ~someMethod(...).

But you might consider using JsRender to render your whole content, not just the options. And if you use JsViews then you don't need to write code to append or remove DOM elements. It can just work declaratively.

There is a really simple example here Data-linked tags, and many more here: JsViews samples.

You might be interested in this page (more advanced) too - since it shows how sometimes you have a choice about inserting IDs or using alternative approaches where that is no longer necessary...