टेम्पलेट इंजन के रूप में अंडरस्कोर.जे का उपयोग कैसे करें?

Question

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

Comments

"ल्यूक" की रक्षा में, कम से कम मई की शुरुआत में मैनुअल के बेहतर संस्करण का कोई उन्नत उपयोग नहीं था

— शनीमल

मैंने बस एक ऐसे ही सवाल का जवाब दिया जिससे आपके सवाल का भी फायदा होगा। stackoverflow.com/questions/28136101/retrieve-column-in-parse/…

— jeffdill2

Answer 1

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

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

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

सरल उदाहरण:

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

तब tpl({foo: "blahblah"})स्ट्रिंग को प्रदान किया जाएगा<h1>Some text: blahblah</h1>

Comments

मुझे समझ नहीं आता क्यों किसी को भी होगा नीचे वोट यही नहीं, यह है परियोजना के मुखपृष्ठ पर विहित जवाब और निर्देशों के अंक, यह क्लासिक "सिखाने मछली के लिए एक आदमी है।"

— जॉन जेड

मुझे लगता है कि वे वोट का कारण यह बताएंगे कि उनके द्वारा प्रदान किए गए दस्तावेज़ बहुत कम देते हैं कि कैसे <% और <% = अपने विलक्षण उदाहरण से परे और कैसे <% = से प्रिंट () में स्विच करके उस पैटर्न को बदल दिया जाए। इसके अलावा 'इंटरपोलेट' का उपयोग करते समय कुछ अजीब व्यवहार होते हैं जो शायद थोड़ा और स्पष्टीकरण के साथ दृश्य बनाते हैं। फिर, जो प्रदान नहीं किया गया है। हालांकि मैं सहमत हूँ, इसकी एक बेवकूफी भरी बात है कि मत देना।

— क्यू हैमर

3. <% -%> - HTML के साथ कुछ मूल्यों को मुद्रित करने के लिए बच गया

— लीजी

मैं नीचे नहीं गया, लेकिन आपका उत्तर यह बताने के लिए कुछ नहीं करता है (लिंक देने से अलग) कि यह समझने के लिए कि टेम्पलेट इंजन के रूप में अंडरस्कोर का उपयोग कैसे करें। आपका उत्तर एक त्वरित "धोखा शीट" प्रदान करता है, शायद उन लोगों के लिए जो पहले से ही इसे प्राप्त करते हैं, लेकिन खुद से, यह सवाल का जवाब नहीं है। मुझे आश्चर्य है कि इसमें उतने उत्थान हैं जितने कि यह है।

— Zach Lysobey

-1, प्रलेखन कई मामलों में कमी है। यह लगभग निश्चित है कि उपयोगकर्ता डॉक्स से परामर्श करने के बाद यहां आए थे। गरीब का जवाब।

— मैट पार्किंस

Answer 2

<!-- 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 हैक के JsField डेमो @tarun_telang द्वारा नीचे उल्लेख किया है
• JsFiddle उप-टेम्पलेट करने के लिए एक गैर-मानक विधि

Comments

अपने उदाहरण के भीतर "टेक्स्ट / html" स्क्रिप्ट टैग का स्पष्ट रूप से उपयोग करने के लिए धन्यवाद; मैं अंडरस्कोर.जेएस के लिए नया हूं और मैंने अनपेक्षित रूप से प्रलेखन को गलत बताया है - यह जानना अच्छा है कि टेम्पलेटस्ट्रीमिंग को हमेशा इनलाइन नहीं लिखा जाना चाहिए।

— aschyiel

खाका वास्तव में text/htmlऐसा नहीं है कि type="text/html"झूठ बोलना, झूठ समस्या पैदा कर सकता है। आप इस तरह के रूप में एक सटीक प्रकार के साथ बेहतर होगा text/x-underscore।

— म्यू

म्यू, मुझे लगता है कि यह इंगित करने के लिए अच्छा है कि यह कोई फर्क नहीं पड़ता। इसका सामना करते हैं, जो कुछ भी आप वहां रखते हैं वह झूठ है। पाठ / एक्स-अंडरस्कोर एक बड़ा झूठ है क्योंकि मैं लॉश का उपयोग करता हूं, योग्य :) अंतिम JsFiddle में मैंने जोड़ा type="foo/bar"क्योंकि मैं चाहता हूं कि हर कोई यह जानना चाहता है कि यह तब तक कोई फर्क नहीं पड़ता जब तक कि ब्राउज़र / सर्वर इसे पहचानता नहीं है और कोशिश नहीं करता है इसके साथ कुछ करने के लिए चूंकि html एक प्रकार की स्क्रिप्ट नहीं है, इसलिए मैं पाठ / html के साथ काफी सुरक्षित महसूस करता हूं (John Resig इसका उपयोग करता है) फू / बार भी काम करता है :)

— Shanimal

लोग हर समय मुझसे असहमत रहते हैं, मैं इसे व्यक्तिगत रूप से नहीं लेने की पूरी कोशिश करता हूं (भले ही यह व्यक्तिगत है :)। मुझे बार-बार छोटी-मोटी ढिलाई के अनजाने दुष्प्रभावों से जला दिया गया है, इसलिए मेरी आदत यह सख्ती के पक्ष में है। MIME प्रकार चश्मा वास्तव में */x-*"निर्मित" उपयोगों के लिए आरक्षित प्रकारों को रखता है, मुझे नहीं लगता कि text/underscoreआधिकारिक रजिस्ट्रियों में एक प्रकार है इसलिए मैं उपयोग करता text/x-underscoreहूं क्योंकि मैं पागल हूं और वे वास्तव में मुझे प्राप्त करने के लिए बाहर हैं।

— म्यू

यह

— बता

Answer 3

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

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>');

Comments

मूंछें प्रक्षेप टिप ने एक्सप्रेस 3 दृश्य का उपयोग करते समय मेरी मदद की जो कि ईजे का उपयोग करके प्रदान की गई थी। धन्यवाद!

— माइक्रा

दृश्य से टेम्प्लेट का उपयोग करने के लिए, आप अपने पृष्ठ मार्कअप में निम्न हो सकते हैं: <script type = "text / template" id = "my-template"> <div> <% - name%> </ div> </ script > और फिर अपने जेएस में निम्नलिखित करें: var html = _.template ($ ('# मेरा-टेम्पलेट')। html (), {नाम: "जॉन स्मिथ"});

— गौरव गुप्ता

@evilcelery - आपकी interpolateटिप काम नहीं आई, लेकिन इसने किया:_.templateSettings = { interpolate: /\{\{\=(.+?)\}\}/g, escape: /\{\{\-(.+?)\}\}/g, evaluate: /\{\{(.+?)\}\}/g };

— vsync

Answer 4

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

_.Template समारोह 3 तर्क हैं:

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

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

1. ऑब्जेक्ट डेटा : ऊपर दिए गए डेटा के समान

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

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

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

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

भागने अनुभाग के साथ एचटीएमएल निकल जाता _.escape दिया कोड के रिटर्न मान पर। तो एक की तुलना में अपने समान _.escape (कोड) एक में लगाना अनुभाग, लेकिन यह साथ निकल जाता है \ तरह खाली स्थान के पात्रों \ 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"

आप यहां अधिक उदाहरण पा सकते हैं कि टेम्पलेट का उपयोग कैसे करें और डिफ़ॉल्ट सेटिंग्स को ओवरराइड करें: http://underscorejs.org/#template

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

टेम्प्लेट के बजाय लैकोनिक के साथ डोम ट्री बनाने का एक और विकल्प ।

Answer 5

मैं एक बहुत ही सरल उदाहरण दे रहा हूं

1)

var data = {site:"mysite",name:"john",age:25};
var template = "Welcome you are at <%=site %>.This has been created by <%=name %> whose age is <%=age%>";
var parsedTemplate = _.template(template,data);
console.log(parsedTemplate); 

परिणाम होगा

Welcome you are at mysite.This has been created by john whose age is 25.

2) यह एक टेम्पलेट है

   <script type="text/template" id="template_1">
       <% _.each(items,function(item,key,arr) { %>
          <li>
             <span><%= key %></span>
             <span><%= item.name %></span>
             <span><%= item.type %></span>
           </li>
       <% }); %>
   </script>

यह html है

<div>
  <ul id="list_2"></ul>
</div>

यह जावास्क्रिप्ट कोड है जिसमें json ऑब्जेक्ट होता है और html में टेम्पलेट डालता है

   var items = [
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       } 
   ];
  $(document).ready(function(){
      var template = $("#template_1").html();
      $("#list_2").html(_.template(template,{items:items}));
  });

Answer 6

एक्सप्रेस के साथ यह इतना आसान है। सभी की जरूरत है कि आप नोड पर समेकित मॉड्यूल का उपयोग करें ताकि आपको इसे स्थापित करने की आवश्यकता हो:

npm install consolidate --save

फिर आपको इसके द्वारा डिफ़ॉल्ट इंजन को html टेम्पलेट में बदलना चाहिए:

app.set('view engine', 'html');

HTML एक्सटेंशन के लिए अंडरस्कोर टेम्पलेट इंजन पंजीकृत करें:

app.engine('html', require('consolidate').underscore);

हॊ गया !

अब उदाहरण के लिए लोड करने के लिए 'index.html' नामक एक टेम्प्लेट:

res.render('index', { title : 'my first page'});

शायद आपको अंडरस्कोर मॉड्यूल स्थापित करने की आवश्यकता होगी।

npm install underscore --save

मैं आशा करता हूं कि इससे आपको मदद मिली होगी!

Answer 7

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

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

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

Comments

+1 मैंने अपने उदाहरण में XSS के बारे में एक नोट जोड़ा। यह किसी वेब पेज में अनजान उपयोगकर्ता की जानकारी को इंजेक्ट करने के बारे में एक बहुत अच्छा बिंदु है। या तो एक टेम्पलेट इंजन या $ .html () के माध्यम से।

— शनीमल

Answer 8

लोदाश भी वही है जो पहले एक पटकथा लिखता है:

<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");

जहाँ popoup एक div है जहाँ आप तालिका बनाना चाहते हैं