当前位置 : 首页 » 互动问答 » 正文

语法更改 - 从JQuery模板迁移到JsRender

分类 : 互动问答 | 发布时间 : 2014-07-13 11:34:55 | 评论 : 1 | 浏览 : 513 | 喜欢 : 2

任何人都可以在从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);

        }

        这$ pages.remove();
        $ flipPages = this。$ el.children('div.page1');
        this.flipPagesCount = this。$ flipPages.length;

        this._adjustLayout((this.state === undefined)?this.currentPage:this.state);

    },

有谁知道我将如何改变上面的基本设置以迁移到JSRender?

EDIT:

感谢您的回复。

为了给我的问题提供一些背景知识,下面是两个例子。第一个使用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>

to:

 <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);

to:

 $( “本。$ EL”)。HTML(
                $( “#pageTmpl”)。渲染(pageData)
            );

在jquery.flips.js。

任何建议,你可以提供为什么这是值得赞赏的。

回答(1)

  • 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”) ;
    

    maps to:

    jsRender

     $( “#movieList”)。HTML(
        $( “#movieTemplate”)。渲染(动画)
    );
    

    实际上JsRender不使用DOM来渲染。

    所以你也可以将上面的代码写成:

     var html = $(“#movieTemplate”)。render(movies); //渲染为字符串
    $( “#movieList”)HTML(HTML); //插入DOM
    

    或者,您可以编写:

     var compiledTemplate = $ .templates(“#movieList”); //编译模板
    var html = compiledTemplate.render(movies); //渲染为字符串
    $( “#movieList”)HTML(HTML); //插入DOM
    

    基于字符串的呈现是使用JsRender的 better perf 的一个原因

    至于模板标记如何映射,以下是一些基本标记:

    jQuery模板:< notranslate> {{html synopsis}}

    • ${name}
    • {{if language}} ... {{else subtitles}} ... {{else}} ... {{/ if}}
    • {{ }} ... {{/ each}}
    • {{> synopsis}}

    jsRender

    • {{:name}} (See docs)
    • (这里没有改变:参见 (See docs)
    • {{for languages}} ... {{/ for}}
      {{if languages}} ... {{else subtitles}} .. 。{{else}} ... {{/ if}} docs)
    • {{for languages}}...{{/for}} (See docs)

相关阅读: