Underscore use and learning of template functions

Good busy recently, various projects are urgently on-line. CSS adjust the dizzy brain swell, no longer have time to ponder my cute JS goblin.

But in the busy schedule still want to express the thanks to Underscore.js, small and light to achieve my needs. Specifically say the situation, the meeting of the Appointment interface,

I was bombast with the backstage eldest brother patted chest said, you give me a piece of JSON, I also you a front end (intestines already regret blue)

So the backstage of the upright brother really went to do so, all the interfaces are encapsulated into JSON format data to me.

began to work, at the beginning my approach is to use AJAX request to the data, and put it into their own functions using JS operation DOM to complete various requirements. The more you write, the more

The more headaches, the more slowly the amount of data, the interface is also more. I met underscore at the time of the headache, which provided a good template function _.template

Using JSP-like notation <%=item.film%> to replace the corresponding data in JSON, not only separates the data from the page, but also improves the dimension of the code well.

Protection of the. Let's talk about this underscore in detail:

Compiling a JavaScript template into a function that can be used for page rendering is useful for generating complex HTML and rendering operations through a JSON data source. Template functions can use <%=.%> to insert variables, or you can execute arbitrary JavaScript code with the <% ...%> . If you want to insert a value and let it be HTML-escaped, use <%-...%>. When you assign a value to a template function, you can pass a data object that contains the corresponding property of the template. If you want to write a one-time, you can pass the object data as a second parameter to the template templates to render directly, so that the page will immediately render instead of returning a template function. The parameter settings is a hash table that contains any settings _.templatesettingsthat can be overridden.

var compiled = _.template ("Hello: <%= name%>"), compiled ({name: ' Moe '});=> "Hello:moe" var template = _.template ( "<b><%-value%></b>"); Template ({value: ' <script> '});=> "<b>&lt;script&gt ;</b> "

You can also use printin JavaScript code. Sometimes this is more convenient than using <%= ...%> .

var compiled = _.template ("<% print (' Hello ' + epithet); %> "); compiled ({epithet:" Stooge "});=>" Hello stooge "

If the Erb-style delimiter you don't like, you can change the template settings for underscore, using other symbols to embed the code. Define a interpolate regular expression to match the statement that embeds the code verbatim, If you want to insert an escaped HTML code, you need to define an escape regular expression to match, and a evaluate Regular expressions to match statements that you want to execute directly at once without any return value. You can define or omit any of these three. For example, to execute a template of type mustache.js:

_.templatesettings = {  interpolate:/\{\{(. +?) \}\}/g};var template = _.template ("Hello {{name}}!"); Template ({name: "Mustache"});=> "Hello mustache!"

By default, the template uses the WITH statement to obtain all data values. Of course, you can also specify a variable name in the variable settings. This can significantly improve the rendering speed of the template.

_.template ("Using ' with ': <%= data.answer%>", {variable: ' data '}) ({answer: ' no '});=> "Using ' with ': No"

Precompiled templates are useful for debugging non-reproducible errors. This is because pre-compiled templates can provide incorrect code line numbers and stack traces, and some templates are not compiled on the client (browser) on a compiled template function, and the source property provides simple precompiled functionality.

<script>  jst.project = <%= _.template (jsttext). SOURCE%>;</script>

All the instructions for the official API can be said to be clear and unambiguous, and the following code was born:

function (item) {%>            <div class= "outer" >                <div class= "title" >                    <span ><%=item.film%></span >                </div>                <ul class= "ul" >                    function(item) {%>                        <li>                            <a href= "<%=item.url%>" > "<%=item.title%>" </a>                        </li>                    <%});%>                </ ul>                                    </div>        <%});%>

The data json is:

var datas = [{    "ping",    "7183.81",    "www.pingan.com"}, {     "    Peace", "7183.81",    "www.pingan.com"}, {    "peace",    " 7183.81 ",    " www.pingan.com "}, {    " peace ",    " 7183.81 ",    "www.pingan.com"}];

Call statement:

$ (". Containerf"). HTML (_.template ($ ("#t2"). html (), datas));

Under which div you want to put under which Div, just change the class name. Containerf

Use and learning of underscore template features