javascript - टेम्पलेट इंजन के रूप में underscore.js का उपयोग कैसे करें?




node.js functional-programming (6)

अंडरस्कोर टेम्पलेट के बारे में आपको जो कुछ जानने की आवश्यकता है वह here । ध्यान में रखने के लिए केवल 3 चीजें:

  1. <% %> - कुछ कोड निष्पादित करने के लिए
  2. <%= %> - टेम्पलेट में कुछ मान मुद्रित करने के लिए
  3. <%- %> - कुछ मान प्रिंट करने के लिए एचटीएमएल बच निकला

यह सब इसके बारे में है।

सरल उदाहरण:

var tpl = _.template("<h1>Some text: <%= foo %></h1>");

फिर tpl({foo: "blahblah"}) स्ट्रिंग में प्रस्तुत किया जाएगा <h1>Some text: blahblah</h1>

मैं जावास्क्रिप्ट के नए उपयोग के बारे में एक सर्वरसाइड भाषा के रूप में और एक कार्यात्मक भाषा के रूप में जानने की कोशिश कर रहा हूं। कुछ दिन पहले मैंने नोड.जेएस और एक्सप्रेस फ्रेमवर्क के बारे में सुना। तब मैंने उपयोगिता कार्यों के एक सेट के रूप में underscore.js के बारे में देखा। मैंने इस सवाल को स्टैक ओवरफ्लो पर देखा। यह कहता है कि हम टेम्पलेट इंजन के रूप में underscore.js का उपयोग कर सकते हैं। किसी को templating के लिए underscore.js का उपयोग करने के बारे में अच्छा ट्यूटोरियल पता है, खासकर उन बड़े लोगों के लिए जिनके पास उन्नत जावास्क्रिप्ट के साथ कम अनुभव है। धन्यवाद


इसके सबसे सरल रूप में आप इसका उपयोग करेंगे:

var html = _.template('<li><%= name %></li>', { name: 'John Smith' });
//html is now '<li>John Smith</li>'   

यदि आप टेम्पलेट का उपयोग करने जा रहे हैं तो आप इसे संकलित करना चाहते हैं ताकि यह तेज़ हो:

var template = _.template('<li><%= name %></li>');

var html = [];
for (var key in names) {
    html += template({ name: names[i] });
}

console.log(html.join('')); //Outputs a string of <li> items

मैं व्यक्तिगत रूप से मूंछ शैली वाक्यविन्यास पसंद करते हैं। डबल घुंघराले ब्रेसिज़ का उपयोग करने के लिए आप टेम्पलेट टोकन मार्कर समायोजित कर सकते हैं:

_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;

var template = _.template('<li>{{ name }}</li>');

टेम्पलेटिंग के लिए प्रलेखन आंशिक है, मैंने स्रोत देखा।

_.template फ़ंक्शन में 3 तर्क हैं:

  1. स्ट्रिंग टेक्स्ट : टेम्पलेट स्ट्रिंग
  2. ऑब्जेक्ट डेटा : मूल्यांकन डेटा
  3. ऑब्जेक्ट सेटिंग्स : स्थानीय सेटिंग्स, _.template सेटिंग्स वैश्विक सेटिंग्स ऑब्जेक्ट है

यदि कोई रेंडर फ़ंक्शन की तुलना में कोई डेटा (या शून्य) दिया गया है, तो उसे वापस कर दिया जाएगा। इसमें 1 तर्क है:

  1. ऑब्जेक्ट डेटा : उपर्युक्त डेटा के समान

सेटिंग्स में 3 regex पैटर्न और 1 स्थिर पैरामीटर हैं:

  1. RegExp मूल्यांकन : टेम्पलेट स्ट्रिंग में "<% कोड%>"
  2. RegExp इंटरपोलेट : टेम्पलेट स्ट्रिंग में "<% = कोड%>"
  3. RegExp भागने : "<% - कोड%>"
  4. स्ट्रिंग चर : वैकल्पिक, टेम्पलेट स्ट्रिंग में डेटा पैरामीटर का नाम

एक मूल्यांकन खंड में कोड का मूल्यांकन किया जाएगा। आप मूल्यांकन अनुभाग में __p + = "mystring" कमांड के साथ इस अनुभाग से स्ट्रिंग जोड़ सकते हैं, लेकिन इसकी अनुशंसा नहीं की जाती है (टेम्पलेट इंटरफ़ेस का हिस्सा नहीं), इसके बजाय इंटरपोलेट अनुभाग का उपयोग करें। इस प्रकार का अनुभाग टेम्पलेट को या तो टेम्पलेट जोड़ने के लिए है।

इंटरपोलेट अनुभाग में कोड का परिणाम मूल्यांकन टेम्पलेट में जोड़ा जाएगा। अगर शून्य वापस दिया गया है, तो खाली स्ट्रिंग जोड़ा जाएगा।

एस्केप सेक्शन दिए गए कोड के रिटर्न वैल्यू पर _.escape के साथ एचटीएमएल से बच निकलता है। तो यह एक इंटरपोलेट सेक्शन में _.escape (कोड) के समान है, लेकिन यह _.escape पर कोड को पास करने से पहले \ whitespace अक्षर \ n से बच निकलता है। मुझे नहीं पता कि यह महत्वपूर्ण क्यों है, यह कोड में है, लेकिन यह इंटरपोलेट और _.escape के साथ अच्छी तरह से काम करता है - जो सफेद-स्पेस वर्णों से भी बच नहीं आता है।

डिफ़ॉल्ट रूप से डेटा पैरामीटर को (डेटा) {...} कथन द्वारा पारित किया जाता है, लेकिन इस प्रकार का मूल्यांकन नामित चर के मूल्यांकन के मुकाबले बहुत धीमा है। तो परिवर्तनीय पैरामीटर के साथ डेटा नामकरण कुछ अच्छा है ...

उदाहरण के लिए:

var html = _.template(
    "<pre>The \"<% __p+=_.escape(o.text) %>\" is the same<br />" +
        "as the  \"<%= _.escape(o.text) %>\" and the same<br />" +
        "as the \"<%- o.text %>\"</pre>",
    {
        text: "<b>some text</b> and \n it's a line break"
    },
    {
        variable: "o"
    }
);

$("body").html(html);

परिणाम

The "<b>some text</b> and 
 it's a line break" is the same
as the "<b>some text</b> and 
 it's a line break" and the same
as the "<b>some text</b> and 
 it's a line break"

आप टेम्पलेट का उपयोग कैसे करें और डिफ़ॉल्ट सेटिंग्स को ओवरराइड करने के लिए यहां और अधिक उदाहरण पा सकते हैं: here

टेम्पलेट लोडिंग से आपके पास कई विकल्प हैं, लेकिन अंत में आपको हमेशा टेम्पलेट को स्ट्रिंग में परिवर्तित करना होगा। आप इसे उपर्युक्त उदाहरण की तरह सामान्य स्ट्रिंग के रूप में दे सकते हैं, या आप इसे स्क्रिप्ट टैग से लोड कर सकते हैं, और jquery के .html() फ़ंक्शन का उपयोग कर सकते हैं, या आप इसे एक अलग फ़ाइल से लोड कर सकते हैं, requ.js की tpl प्लगइन के साथ ।

Templating के बजाय laconic साथ डोम पेड़ बनाने के लिए एक और विकल्प।


मैं एक और महत्वपूर्ण खोज साझा करना चाहता था।

<% = variable => का उपयोग क्रॉस-साइट स्क्रिप्टिंग भेद्यता के परिणामस्वरूप होगा। तो इसके बजाय <% - variable -> का उपयोग करने के लिए यह अधिक सुरक्षित है।

क्रॉस-साइट स्क्रिप्टिंग हमलों को रोकने के लिए हमें <% = <% के साथ प्रतिस्थापित करना पड़ा। निश्चित नहीं है, चाहे इसका प्रदर्शन पर कोई असर पड़ेगा


लोडाश भी वही है जैसा कि निम्नानुसार एक स्क्रिप्ट लिखते हैं:

<script type="text/template" id="genTable">
<table cellspacing='0' cellpadding='0' border='1'>
        <tr>
            <% for(var prop in users[0]){%>
            <th><%= prop %> </th>
            <% }%>
        </tr>
        <%_.forEach(users, function(user) { %>
            <tr>
                 <% for(var prop in user){%>
                    <td><%= user[prop] %> </td>
                <% }%>

            </tr>
        <%})%>
</table>

अब कुछ सरल जेएस लिखें:

var arrOfObjects = [];
for (var s = 0; s < 10; s++) {
    var simpleObject = {};
    simpleObject.Name = "Name_" + s;
    simpleObject.Address = "Address_" + s;
    arrOfObjects[s] = simpleObject;
}
var theObject = { 'users': arrOfObjects }
var compiled = _.template($("#genTable").text());
var sigma = compiled({ 'users': myArr });

$(sigma).appendTo("#popup");

जहां पॉपअप एक div है जहां आप तालिका उत्पन्न करना चाहते हैं


<!-- Install jQuery and underscore -->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

<!-- Create your template -->
<script type="foo/bar" id='usageList'>
<table cellspacing='0' cellpadding='0' border='1' >
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <%
        // repeat items 
        _.each(items,function(item,key,list){
          // create variables
          var f = item.name.split("").shift().toLowerCase();
      %>
        <tr>
          <!-- use variables -->
          <td><%= key %></td>
          <td class="<%= f %>">
            <!-- use %- to inject un-sanitized user input (see 'Demo of XSS hack') -->
            <h3><%- item.name %></h3>
            <p><%- item.interests %></p>
          </td>
        </tr>
      <%
        });
      %>
    </tbody>
  </table>
</script>

<!-- Create your target -->

<div id="target"></div>

<!-- Write some code to fetch the data and apply template -->

<script type="text/javascript">
  var items = [
    {name:"Alexander", interests:"creating large empires"},
    {name:"Edward", interests:"ha.ckers.org <\nBGSOUND SRC=\"javascript:alert('XSS');\">"},
    {name:"..."},
    {name:"Yolando", interests:"working out"},
    {name:"Zachary", interests:"picking flowers for Angela"}
  ];
  var template = $("#usageList").html();
  $("#target").html(_.template(template,{items:items}));
</script>
  • JsFiddle धन्यवाद @PHearst!
  • JsFiddle (नवीनतम)
  • JsFiddle सूची पहले अक्षर (जटिल उदाहरण w / छवियों, फ़ंक्शन कॉल, उप-टेम्पलेट्स) द्वारा समूहित की गई है! एक विस्फोट किया...
  • XSS हैक का JsFiddle डेमो नीचे @tarun_telang द्वारा नोट किया गया
  • JsFiddle उप-टेम्पलेट्स करने के लिए एक गैर-मानक विधि





template-engine