title: Syntax Change - Migrating from JQuery Templates to JsRender
body: <p>Can anyone help out on how to render a JSRender template after migrating from JQuery Templates?</p>
  
  <p>With the old JQuery Template system I have got the following in my HTML page:</p>
  
  <pre><code>        &lt;script id="pageTmpl1" type="text/x-jquery-tmpl"&gt;
          &lt;div class="${theClass1}" style="${theStyle1}"&gt;
              &lt;div class="front1"&gt;
                  &lt;div class="outer1"&gt;
                      &lt;div class="content1" style="${theContentStyleFront1}"&gt;
                          &lt;div class="inner1"&gt;{{html theContentFront1}}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="back1"&gt;
                  &lt;div class="outer1"&gt;
                      &lt;div class="content1" style="${theContentStyleBack1}"&gt;
                          &lt;div class="inner1"&gt;{{html theContentBack1}}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>and then kick it off from a separate js file - excerpt from this file here, with <code>$( '#pageTmpl1' ).tmpl( pageData ).appendTo( this.$el );</code> being the key part:</p>
  
  <pre><code>        _layout             : function() {
  
          this._setLayoutSize();
  
          for( var i = 0; i &lt;= this.pagesCount - 2; ++i ) {
  
              var $page       = this.$pages.eq( i ),
                  pageData    = {
                      theClass1                   : 'page1',
                      theContentFront1            : $page.html(),
                      theContentBack1             : ( i !== this.pagesCount ) ? this.$pages.eq( i + 1 ).html() : '',
                      theStyle1                   : 'z-index: ' + ( this.pagesCount - i ) + ';left: ' + ( this.windowProp.width / 2 ) + 'px;',
                      theContentStyleFront1       : 'width:' + this.windowProp.width + 'px;',
                      theContentStyleBack1        : 'width:' + this.windowProp.width + 'px;'
                  };
  
              if( i === 0 ) {
  
                  pageData.theClass1 += ' cover1';
  
              }
              else {
  
                  pageData.theContentStyleFront1 += 'left:-' + ( this.windowProp.width / 2 ) + 'px';
  
                  if( i === this.pagesCount - 2 ) {
  
                      pageData.theClass1 += ' cover-back1';
  
                  }
  
              }
  
              $( '#pageTmpl1' ).tmpl( pageData ).appendTo( this.$el );
  
          }
  
          this.$pages.remove();
          this.$flipPages     = this.$el.children( 'div.page1' );
          this.flipPagesCount = this.$flipPages.length;
  
          this._adjustLayout( ( this.state === undefined ) ? this.currentPage : this.state );
  
      },
  </code></pre>
  
  <p>Does anyone know how I would have to alter the basic setup above in order to migrate to JSRender?</p>
  
  <p>EDIT:</p>
  
  <p>Thanks for your response. </p>
  
  <p>To give some context to my question, here are two examples; the first using jQuery Templates, the second (with advised changes) using JSRender.</p>
  
  <ol>
  <li><a href="http://www.timm.ie/example_jqt/" rel="nofollow">http://www.timm.ie/example_jqt/</a></li>
  <li><a href="http://www.timm.ie/example_jsr/" rel="nofollow">http://www.timm.ie/example_jsr/</a></li>
  </ol>
  
  <p>Though following the indicated syntactical changes, ultimately the desired result is not appearing (in the second case), with no errors to work from.</p>
  
  <p>Changes made were from:</p>
  
  <pre><code>        &lt;script id="pageTmpl" type="text/x-jquery-tmpl"&gt;
          &lt;div class="${theClass}" style="${theStyle}"&gt;
              &lt;div class="front"&gt;
                  &lt;div class="outer"&gt;
                      &lt;div class="content" style="${theContentStyleFront}"&gt;
                          &lt;div class="inner"&gt;{{html theContentFront}}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="back"&gt;
                  &lt;div class="outer"&gt;
                      &lt;div class="content" style="${theContentStyleBack}"&gt;
                          &lt;div class="inner"&gt;{{html theContentBack}}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;          
      &lt;/script&gt;
  </code></pre>
  
  <p>to:</p>
  
  <pre><code>        &lt;script id="pageTmpl" type="text/x-jsrender"&gt;
          &lt;div class="{{:theClass}}" style="{{:theStyle}}"&gt;
              &lt;div class="front"&gt;
                  &lt;div class="outer"&gt;
                      &lt;div class="content" style="{{:theContentStyleFront}}"&gt;
                          &lt;div class="inner"&gt;{{&gt;theContentFront}}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="back"&gt;
                  &lt;div class="outer"&gt;
                      &lt;div class="content" style="{{:theContentStyleBack}}"&gt;
                          &lt;div class="inner"&gt;{{&gt;theContentBack}}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
  </code></pre>
  
  <p>in the index.html, and from:</p>
  
  <pre><code>$( '#pageTmpl' ).tmpl( pageData ).appendTo( this.$el );
  </code></pre>
  
  <p>to:</p>
  
  <pre><code>$("this.$el").html(
                  $("#pageTmpl").render(pageData)
              );
  </code></pre>
  
  <p>in jquery.flips.js.</p>
  
  <p>Any advice you could offer as to why this is would be appreciated. </p>