Can anyone help out on how to render a JSRender template after migrating from JQuery Templates?
With the old JQuery Template system I have got the following in my HTML page:
<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 ); 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?
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.
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:
$( '#pageTmpl' ).tmpl( pageData ).appendTo( this.$el );
to:
$("this.$el").html(
$("#pageTmpl").render(pageData)
);
in jquery.flips.js.
Any advice you could offer as to why this is would be appreciated.
Here is a page using jQuery Templates:
jquery-tmpl/demos/step-by-step/.../0_local-data-source.html.
And here is the equivalent page using jsRender:
jsrender/demos/step-by-step/01_inserting-data.html (Code here).
So you see that
jQuery Templates:
$("#movieTemplate").tmpl(movies).appendTo("#movieList");
maps to:
jsRender
$("#movieList").html(
$("#movieTemplate").render(movies)
);
In fact JsRender does not use the DOM to render.
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.
As to how the template tags map, here are some of the basic tags:
jQuery Templates:
${name}{{html synopsis}}{{if languages}}...{{else subtitles}}...{{else}}...{{/if}}{{each languages}}...{{/each}}jsRender
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments