jQuery Templates: Nesting shows results + code

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

jQuery Templates: Nesting shows results + code

jeff00seattle
Hi
 
I have been checking out jQuery templates and they are pretty cool.
 
I am currently trying out nesting templates, and it almosts works -- I am see the expected generated results but also the jQuery code as well. I am generating a simple table with three different templates: table, row, and cell templates nested together.
 
In the following image, the first two lines are jQuery template code, and the bottom two lines are the generated output of nested templates.
 
 
Source view (using firebug) of the previous image is as follows.
  1. <DIV id=divTest><TABLE>
    <TBODY>
    <TR>$('#RowTemplate').tmpl( { input_A:
    <TD><B>Hello A</B> </TD>} ).html()</TR>
    <TR>$('#RowTemplate').tmpl( { input_A:
    <TD><LABEL style="COLOR: blue">Hello B</LABEL> </TD>
    <TD><INPUT type=text></INPUT> </TD>} )</TR></TBODY></TABLE></DIV>
 
How I got it working thus far is that JavaScript function template_test() (#9) calls template addressEditTemplate (#8) which populates a table with templated rows using get_TemplateScript() (#2) .
 
There are two two templates HelloA_TestTemplate (#6) & HelloB_TestTemplate (#7) that both use the templated table row RowTemplate (#5) , and each have a different nested templated to insert table cells Simple_EntryTemplate (#3)  and TextBox_EntryTemplate (#4) .
  1. <head>
        <title>jQuery Templates</title>
        <script src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js " type="text/javascript"></script>
        <script src=" http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js " type="text/javascript"></script>
  2. <script type="text/javascript">
      function get_TemplateScript(type) {
        return '#' + type + '_TestTemplate';
      }
    </script>
  3. <script id="Simple_EntryTemplate" type="text/x-jquery-tmpl">
        <td>
        <b>${Test_Label}</b>
        </td>
    </script>
  4. <script id="TextBox_EntryTemplate" type="text/x-jquery-tmpl">
        <td>
        <label style="color:blue">${Test_Label}</label>
        </td>
        <td >
            <input type="text"></input>
        </td>
    </script>
  5. <script id="RowTemplate" type="text/x-jquery-tmpl">
        <tr id="i">
            <td>
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        ${input_A}
                    </tr>
                </table>
            </td>               
        </tr>
    </script>
  6. <script id="HelloA_TestTemplate" type="text/x-jquery-tmpl">
      $('#RowTemplate').tmpl( { input_A: {{tmpl( { Test_Label: 'Hello A' } ) '#Simple_EntryTemplate' }} } ).html()
    </script>
  7. <script id="HelloB_TestTemplate" type="text/x-jquery-tmpl">
      $('#RowTemplate').tmpl( { input_A: {{tmpl( { Test_Label: 'Hello B' } ) '#TextBox_EntryTemplate' }} } )
    </script>
  8.    
    <script id="addressEditTemplate" type="text/x-jquery-tmpl">
      <table>
      {{each(i, testItem) testItems}}
        <tr>{{tmpl(testItem) get_TemplateScript(type) }}</tr>
      {{/each}}
      </table>
    </script>
  9. <script language="javascript" type="text/javascript">
    function template_test(  ) {
        var test = {
         testItems: [
         { type: 'HelloA' },
         { type: 'HelloB' }
         ]
        };
        $('#divTest').empty();
        $('#addressEditTemplate').tmpl(test).appendTo('#divTest');
    }
    </script>
  10. </head>
    <body>
    <div id="divTest"></div>
    <script language="javascript" type="text/javascript">
    template_test();
    </script>
    </body>

 
What am I doing wrong to show the jQuery code as well as the correctly generated results ?
 
Thanks
Default.html