[英]Syntax Change - Migrating from JQuery Templates to JsRender
Can anyone help out on how to render a JSRender template after migrating from JQuery Templates? 从JQuery模板迁移后,谁能提供有关如何呈现JSRender模板的帮助?
With the old JQuery Template system I have got the following in my HTML page: 使用旧的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>
and then kick it off from a separate js file - excerpt from this file here, with $( '#pageTmpl1' ).tmpl( pageData ).appendTo( this.$el );
然后从一个单独的js文件开始-在此文件的摘录中,使用
$( '#pageTmpl1' ).tmpl( pageData ).appendTo( this.$el );
being the key part: 是关键部分:
_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 );
},
Does anyone know how I would have to alter the basic setup above in order to migrate to JSRender? 有谁知道我必须如何更改上述基本设置才能迁移到JSRender?
EDIT: 编辑:
Thanks for your response. 感谢您的答复。
To give some context to my question, here are two examples; 为了给我的问题一些背景,这里有两个例子。 the first using jQuery Templates, the second (with advised changes) using JSRender.
第一个使用jQuery模板,第二个使用建议的更改(使用JSRender)。
Though following the indicated syntactical changes, ultimately the desired result is not appearing (in the second case), with no errors to work from. 尽管遵循指示的语法更改,但最终没有出现期望的结果(在第二种情况下),并且没有错误可做。
Changes made were from: 所做的更改来自:
<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>
in the index.html, and from: 在index.html中,以及从:
$( '#pageTmpl' ).tmpl( pageData ).appendTo( this.$el );
to: 至:
$("this.$el").html(
$("#pageTmpl").render(pageData)
);
in jquery.flips.js. 在jquery.flips.js中。
Any advice you could offer as to why this is would be appreciated. 您可以提供有关为什么这样做的任何建议,我们将不胜感激。
Here is a page using jQuery Templates : 这是使用jQuery Templates的页面:
jquery-tmpl/demos/step-by-step/.../0_local-data-source.html . jquery-tmpl / demos / step-by-step /.../ 0_local-data-source.html 。
And here is the equivalent page using jsRender : 这是使用jsRender的等效页面:
jsrender/demos/step-by-step/01_inserting-data.html ( Code here ). jsrender / demos / step-by-step / 01_inserting-data.html ( 此处为代码 )。
So you see that 所以你看到
jQuery Templates: jQuery模板:
$("#movieTemplate").tmpl(movies).appendTo("#movieList");
maps to: 映射到:
jsRender jsRender
$("#movieList").html(
$("#movieTemplate").render(movies)
);
In fact JsRender does not use the DOM to render. 实际上,JsRender并不使用DOM进行渲染。
So you can also write the above as: 因此,您也可以将上面的代码写为:
var html = $("#movieTemplate").render(movies); // Render to string
$("#movieList").html(html); // Insert in DOM
Alternatively you can write: 或者,您可以编写:
var compiledTemplate = $.templates("#movieList"); // Compile template
var html = compiledTemplate.render(movies); // Render to string
$("#movieList").html(html); // Insert in DOM
The string-based rendering is one reason for the better perf with JsRender. 基于字符串的渲染是使用JsRender获得更好性能的原因之一。
As to how the template tags map, here are some of the basic tags: 关于模板标签的映射方式,以下是一些基本标签:
jQuery Templates: jQuery模板:
${name}
{{html synopsis}}
{{if languages}}...{{else subtitles}}...{{else}}...{{/if}}
{{each languages}}...{{/each}}
jsRender jsRender
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.