gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 17:23:21 27 4
gpt4 key购买 nike

谁能帮忙解决从 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)
);

在 jquery.flips.js 中。

如果您能就此原因提供任何建议,我们将不胜感激。

最佳答案

这是一个使用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 概要}}
  • {{if languages}}...{{else subtitles}}...{{else}}...{{/if}}
  • {{each languages}}...{{/each}}

jsRender

  • {{:name}}(参见 docs)
  • {{>概要}}(参见 docs)
  • {{if languages}}...{{else subtitles}}...{{else}}...{{/if}}
    (所以没有变化此处:参见 docs )
  • {{for languages}}...{{/for}}(参见 docs)

关于javascript - 语法更改 - 从 JQuery 模板迁移到 JsRender,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24722222/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com