语法更改-从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>  

， from:

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

:

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

在jquery.flips.js

。

如果你能提供任何建议，我将不胜感激。

Answer 1

这是一个使用jQuery模板的页面:
jQuery -tmpl/demos/step/…/0_local-data-source.html.

这里是使用jsRender的等效页面:
jsRender/demos/stepping/01_inserding -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}} (See docs)
• {{>synopsis}} (See docs)
• {{if languages}}...{{else subtitles}}...{{else}}...{{/if}}
  (所以这里没有变化:见文档)
• {{for languages}}...{{/for}} (See docs)