JsRender: jQuery Templates New Generation
Just a couple of months ago, we began to rewrite a very large site, since the last major release more than one year passed, of course, the site was being finalized, bugs were corrected and as a result a new version is being created. It will be actively used by AJAX, so the issue with the generation of content on the client, received in JSON format, was very acute. Past templates were proprietary, since at that time there were not so many options that for various reasons did not fit, our templates were based on jquery, and attributes were filled.
First of all, it was decided to conduct a test, when generating a list of 1500 elements, an advantage was obtained 20 times , a comparison with the jQuery Template (page with tests) shows similar results.
I went out to JsRender quite simply. Having visited the jQuery Templates page, I read that the jQuery team decided not to bring this plugin out of beta, they kept their word and for 6 months there have been no updates. This page also contains a link to the JsRender developer blog.
JsRender is optimized for high performance, regular strings are used, without interaction with DOM or jQuery, which is quite logical to add performance, since many articles on jQuery contain tips that don't use jQuery, for example, to get id (without constructions like: $ (this) .attr ('id')) and use only strings to generate different lists, then insert them into the DOM in one fell swoop.
')
Consider an example from the site:
1. The template (id = "movieTemplate"), an unknown type of content will not be processed by the browser, so it treats it simply as text.
{{: # index + 1}} - we input an array of objects to the input, using the lattice we can get the index, since it starts from zero, then we add one
{{> name}} - a call to the properties of the object, a triangle indicates that we will encode a string, i.e. tags will be visible.
2. The container where the content will be inserted (id = "movieList").
3. The script itself, where the template is located using jQuery, is filled using render and the data is inserted into the container.
After which we will see the following result:
This is only a part of the possibilities; at the end of the article, I will provide an exhaustive list of links.
Take for example this Helper functions example. Some things you may not seem obvious. For my purposes, I wrote quite a few converters and auxiliary methods. It is worth setting a stopping point and walking through the properties, much will become clear. I used Firebug, here's an example where you can see what the reference to this object contains, which is used in this context:
The site of the JsRender project says that it is close to beta , the developer promised an official beta in April or May 2012 on this page, but for now it isn’t yet. API changes, adding new features, etc. are possible. This link can also be used to ask questions to the developer, judging by the comments, he reacts fairly quickly.
JsRender Basics (slides): JsRender Fundamentals: Templating for HTML5 Applications
Official examples: JsRender: Demos
Article from two parts: Using JsRender with JavaScript and HTML and Advanced JsRender Templating Features
First of all, it was decided to conduct a test, when generating a list of 1500 elements, an advantage was obtained 20 times , a comparison with the jQuery Template (page with tests) shows similar results.
I went out to JsRender quite simply. Having visited the jQuery Templates page, I read that the jQuery team decided not to bring this plugin out of beta, they kept their word and for 6 months there have been no updates. This page also contains a link to the JsRender developer blog.
JsRender is optimized for high performance, regular strings are used, without interaction with DOM or jQuery, which is quite logical to add performance, since many articles on jQuery contain tips that don't use jQuery, for example, to get id (without constructions like: $ (this) .attr ('id')) and use only strings to generate different lists, then insert them into the DOM in one fell swoop.
')
Consider an example from the site:
<html> <body> <script id="movieTemplate" type="text/x-jsrender"> <div> {{:#index+1}}: <b>{{>name}}</b> ({{>releaseYear}}) </div> </script> <div id="movieList"></div> <script type="text/javascript"> var movies = [ { name: "The Red Violin", releaseYear: "1998" }, { name: "Eyes Wide Shut", releaseYear: "1999" }, { name: "The Inheritance", releaseYear: "1976" } ]; $( "#movieList" ).html( $( "#movieTemplate" ).render( movies ) ); </script> </body> </html> In this example, we have:
1. The template (id = "movieTemplate"), an unknown type of content will not be processed by the browser, so it treats it simply as text.
{{: # index + 1}} - we input an array of objects to the input, using the lattice we can get the index, since it starts from zero, then we add one
{{> name}} - a call to the properties of the object, a triangle indicates that we will encode a string, i.e. tags will be visible.
2. The container where the content will be inserted (id = "movieList").
3. The script itself, where the template is located using jQuery, is filled using render and the data is inserted into the container.
After which we will see the following result:
Basics of syntax in tables
Custom tags, helper methods and converters
This is only a part of the possibilities; at the end of the article, I will provide an exhaustive list of links.
Debugging
Take for example this Helper functions example. Some things you may not seem obvious. For my purposes, I wrote quite a few converters and auxiliary methods. It is worth setting a stopping point and walking through the properties, much will become clear. I used Firebug, here's an example where you can see what the reference to this object contains, which is used in this context:
Important
The site of the JsRender project says that it is close to beta , the developer promised an official beta in April or May 2012 on this page, but for now it isn’t yet. API changes, adding new features, etc. are possible. This link can also be used to ask questions to the developer, judging by the comments, he reacts fairly quickly.
Links
JsRender Basics (slides): JsRender Fundamentals: Templating for HTML5 Applications
Official examples: JsRender: Demos
Article from two parts: Using JsRender with JavaScript and HTML and Advanced JsRender Templating Features
Source: https://habr.com/ru/post/148573/
All Articles