語法更改 - 從JQuery模板遷移到JsRender

Question

任何人都可以幫助您瞭解如何在從JQuery模板遷移後呈現JSRender模板嗎？

在舊JQuery的模板系統，我有我的HTML頁面如下：

 <script id="pageTmpl1" type="text/x-jquery-tmpl"> 
     <div class="${theClass1}" style="${theStyle1}"> 
      <div class="front1"> 
       <div class="outer1"> 
        <div class="content1" style="${theContentStyleFront1}"> 
         <div class="inner1">{{html theContentFront1}}</div> 
        </div> 
       </div> 
      </div> 
      <div class="back1"> 
       <div class="outer1"> 
        <div class="content1" style="${theContentStyleBack1}"> 
         <div class="inner1">{{html theContentBack1}}</div> 
        </div> 
       </div> 
      </div> 
     </div> 

，然後從一個單獨的js文件開始它 - 從這裏這個文件摘錄，與$('#pageTmpl1').tmpl(pageData).appendTo(this.$el);是關鍵部分：

 _layout    : function() { 

     this._setLayoutSize(); 

     for(var i = 0; i <= 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); 

    }, 

有沒有人知道我將不得不改變上面的基本設置，以遷移到JSRender？

編輯：

感謝您的回覆。

爲了給我的問題提供一些上下文，下面是兩個例子;第一個使用jQuery模板，第二個（使用JSRender建議更改）。

1. http://www.timm.ie/example_jqt/
2. http://www.timm.ie/example_jsr/

雖然以下所指示的語法的變化，最終所期望的結果沒有出現（在第二種情況下），沒有任何錯誤，從工作。

所做的更改均來自：

 <script id="pageTmpl" type="text/x-jquery-tmpl"> 
     <div class="${theClass}" style="${theStyle}"> 
      <div class="front"> 
       <div class="outer"> 
        <div class="content" style="${theContentStyleFront}"> 
         <div class="inner">{{html theContentFront}}</div> 
        </div> 
       </div> 
      </div> 
      <div class="back"> 
       <div class="outer"> 
        <div class="content" style="${theContentStyleBack}"> 
         <div class="inner">{{html theContentBack}}</div> 
        </div> 
       </div> 
      </div> 
     </div>   
    </script> 

到：

 <script id="pageTmpl" type="text/x-jsrender"> 
     <div class="{{:theClass}}" style="{{:theStyle}}"> 
      <div class="front"> 
       <div class="outer"> 
        <div class="content" style="{{:theContentStyleFront}}"> 
         <div class="inner">{{>theContentFront}}</div> 
        </div> 
       </div> 
      </div> 
      <div class="back"> 
       <div class="outer"> 
        <div class="content" style="{{:theContentStyleBack}}"> 
         <div class="inner">{{>theContentBack}}</div> 
        </div> 
       </div> 
      </div> 
     </div> 

中的index.html

，並從：

$('#pageTmpl').tmpl(pageData).appendTo(this.$el); 

到：

$("this.$el").html(
       $("#pageTmpl").render(pageData) 
      ); 

in jquery.flips.js。

任何意見，你可以提供至於爲什麼這將不勝感激。

Answer 1

這裏是使用的頁面jQuery模板：
jquery-tmpl/demos/step-by-step/.../0_local-data-source.html。

這裏是等效頁面使用jsRender：
jsrender/demos/step-by-step/01_inserting-data.html（Code here）。

所以你看那個

jQuery的模板：

$("#movieTemplate").tmpl(movies).appendTo("#movieList"); 

映射到：

jsRender

$("#movieList").html(
    $("#movieTemplate").render(movies) 
); 

其實JsRender不使用DOM渲染。

所以，你也可以寫在上面：

var html = $("#movieTemplate").render(movies); // Render to string 
$("#movieList").html(html); // Insert in DOM 

或者你可以寫：

var compiledTemplate = $.templates("#movieList"); // Compile template 
var html = compiledTemplate.render(movies); // Render to string 
$("#movieList").html(html); // Insert in DOM 

基於字符串的渲染是一個原因better perf與JsRender。

至於如何模板標籤地圖，這裏有一些基本的標籤：

jQuery的模板：

• ${name}
• {{html synopsis}}
• {{if languages}}...{{else subtitles}}...{{else}}...{{/if}}
• {{each languages}}...{{/each}}

jsRender

• {{:name}}（見docs）
• {{>synopsis}}（見docs）
• {{if languages}}...{{else subtitles}}...{{else}}...{{/if}}
  （所以在這裏沒有任何變化：見docs）
• {{for languages}}...{{/for}}（見docs）