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

Question

從JQuery模板遷移后，誰能提供有關如何呈現JSRender模板的幫助？

使用舊的JQuery Template系統，我的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)
            );

在jquery.flips.js中。

您可以提供有關為什么這樣做的任何建議，我們將不勝感激。

Answer 1

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

這是使用jsRender的等效頁面：
jsrender / demos / step-by-step / 01_inserting-data.html （ 此處為代碼 ）。

所以你看到

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

基於字符串的渲染是使用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}} （請參閱文檔 ）