টেম্পলেট ইঞ্জিন হিসাবে আন্ডারস্কোর.জেগুলি কীভাবে ব্যবহার করবেন?

Question

আমি সার্ভারসাইড ভাষা এবং কার্যকরী ভাষা হিসাবে জাভাস্ক্রিপ্টের নতুন ব্যবহার সম্পর্কে শিখতে চাইছি। কিছু দিন আগে আমি নোড.জেএস এবং এক্সপ্রেস ফ্রেমওয়ার্ক সম্পর্কে শুনেছি। তারপরে আমি ইউটিলিটি ফাংশনগুলির একটি সেট হিসাবে আন্ডারস্কোর.জেএস সম্পর্কে দেখেছি। আমি এই প্রশ্নটি স্ট্যাকওভারফ্লোতে দেখেছি । এটি বলে যে আমরা টেম্পলেট ইঞ্জিন হিসাবে আন্ডারস্কোর.জেএস ব্যবহার করতে পারি। টেম্প্লেটিংয়ের জন্য আন্ডারস্কোর.জেএস কীভাবে ব্যবহার করবেন সে সম্পর্কে যে কেউ ভাল টিউটোরিয়াল জানে, বিশেষত অগ্রণী জাভাস্ক্রিপ্টের সাথে কম অভিজ্ঞতা আছে এমন বিগিনারদের জন্য। ধন্যবাদ

Comments

"লুকের" প্রতিরক্ষাতে, কমপক্ষে মে মাসের শুরুর দিকে ম্যানুয়ালটির উন্নত সংস্করণটির কোনও উন্নত ব্যবহার ছিল না

— শানিমাল

আমি কেবল একটি অনুরূপ প্রশ্নের উত্তর দিয়েছি যা আপনার প্রশ্নের পাশাপাশি উপকৃত হবে। stackoverflow.com/questions/28136101/retrieve-column-in-parse/...

— jeffdill2

Answer 1

আন্ডারস্কোর টেম্পলেট সম্পর্কে আপনার যা জানা দরকার তা এখানে । মনে রাখতে হবে কেবল 3 টি জিনিস:

1. <% %> - কিছু কোড চালানো
2. <%= %> - টেমপ্লেটে কিছু মান মুদ্রণ করতে
3. <%- %> - কিছু মান মুদ্রণ করতে এইচটিএমএল পালিয়ে গেছে

এটাই সব।

সাধারণ উদাহরণ:

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

তারপরে tpl({foo: "blahblah"})স্ট্রিংয়ে রেন্ডার করা হবে<h1>Some text: blahblah</h1>

Comments

আমি বুঝতে পারি না যে কেউ কেন এটি নিখুঁতভাবে ভোট দেবে, এটি প্রৌ .় উত্তর এবং প্রকল্পের হোমপৃষ্ঠায় থাকা নির্দেশিকাগুলি নির্দেশ করে, এটি ক্লাসিকটি "একজন মানুষকে মাছ ধরা শেখায়"।

— জন z

আমি মনে করি যে তারা যে ডকুমেন্টেশন দিয়েছিল তার ফলে তারা কীভাবে <% এবং <% = মিক্স করতে পারে তার একক উদাহরণের বাইরে এবং কীভাবে <% = থেকে মুদ্রণ করতে () মুদ্রণ পরিবর্তন করে তা খুব কম দেয় I এছাড়াও 'ইন্টারপোলেট' ব্যবহার করার সময় কিছু অদ্ভুত আচরণ রয়েছে যা সম্ভবত আরও কিছুটা ব্যাখ্যা দিয়ে দৃশ্যধারণ করবে। আবার, যা সরবরাহ করা হয় না। যদিও আমি একমত, এটি একটি বোকামি জিনিস ভোট শেষ করে না।

— কুইহ্যামার

3. <% -%> - এইচটিএমএল থেকে পালিয়ে কিছু মান মুদ্রণ করতে

— লিগি

আমি কোনও নিম্নগতি রচনা করি নি, তবে কীভাবে একটি টেম্পলেট ইঞ্জিন হিসাবে আন্ডারস্কোর.জেএস ব্যবহার করতে হবে তা বোঝাতে আপনার উত্তর কিছুই দেয় না (কোনও লিঙ্ক প্রস্তাব দেওয়া বাদ দিয়ে)। আপনার উত্তরটি সম্ভবত যারা ইতিমধ্যে এটি পেয়েছে তাদের জন্য একটি দ্রুত "চিট শীট" সরবরাহ করে তবে নিজেই এটি প্রশ্নের উত্তর নয়। আমি আশ্চর্য হলাম এটির মতো যতটা উত্সাহ রয়েছে তা।

— 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>

• জেএসফিডাল ধন্যবাদ @ পিয়ার্স্ট!
• জেএসফিডেল (সর্বশেষ)
• জেএসফিডাল তালিকাটি প্রথম অক্ষর দ্বারা শ্রেণিবদ্ধ করা হয়েছে (জটিল উদাহরণ ডাব্লু / চিত্রগুলি, ফাংশন কলগুলি, উপ-টেম্পলেটগুলি) এটি কাঁটাচামচ করুন! একটি বিস্ফোরণ আছে ...
• এক্সএসএস হ্যাকের জেএসফিডাল ডেমো নীচে @tarun_telang দ্বারা উল্লিখিত হয়েছে
• উপ-টেমপ্লেটগুলি করতে জেএসফিডেল ওয়ান অ-মানক পদ্ধতি

Comments

আপনার উদাহরণের মধ্যে স্পষ্টভাবে "পাঠ্য / এইচটিএমএল" স্ক্রিপ্ট ট্যাগটি ব্যবহার করার জন্য আপনাকে ধন্যবাদ; আমি আন্ডারস্কোর.জেএস এ নতুন এবং আমি দুর্ভাগ্যক্রমে ডকুমেন্টেশনটি ভুলভাবে পড়েছি - টেম্পলেট স্ট্রিংটি সবসময় ইনলাইন লিখতে হয় না তা জেনে ভাল।

— অ্যাস্কিয়েল

টেমপ্লেটটি আসলে text/htmlতাই বলা type="text/html"মিথ্যা নয়, মিথ্যা সমস্যা সৃষ্টি করতে পারে। আপনি যেমন একটি সঠিক টাইপ সঙ্গে ভাল হতে চাই text/x-underscore।

— মিউ খুব সংক্ষিপ্ত

মিউ, আমি এটি উল্লেখ করা ভাল মনে করি যে এটি কোনও ব্যাপার না। আসুন এটির মুখোমুখি হোন, আপনি সেখানে যা কিছু রেখেছেন তা মিথ্যা। পাঠ্য / এক্স-আন্ডারস্কোরটি একটি বড় মিথ্যা কারণ আমি লোডাশ ব্যবহার করি, লোল :) শেষ জেএসফিডেলটিতে আমি যুক্ত করেছি type="foo/bar"কারণ আমি সবাইকে জানতে চাই যে যতক্ষণ না ব্রাউজার / সার্ভার এটি সনাক্ত না করে চেষ্টা করে ততক্ষণ এটি গুরুত্বপূর্ণ নয় এটি দিয়ে কিছু করতে। যেহেতু এইচটিএমএল কোনও ধরণের স্ক্রিপ্ট নয়, আমি টেক্সট / এইচটিএমএল দিয়ে মোটামুটি নিরাপদ বোধ করি (জন রেসিগ এটি ব্যবহার করে)

— ফু

লোকেরা সর্বদা আমার সাথে দ্বিমত পোষণ করে, আমি ব্যক্তিগতভাবে না নেওয়ার জন্য যথাসাধ্য চেষ্টা করি (এমনকি এটি ব্যক্তিগত থাকাকালীন :))। আমি বার বার ছোটখাটো opিলে .ালা অনিচ্ছাকৃত পার্শ্ব প্রতিক্রিয়া দ্বারা জ্বলিত হয়েছি তাই আমার অভ্যাসটি এটি কঠোরতার পক্ষে ভুল হয়। মাইম টাইম স্পেসগুলি */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 ভিউ ব্যবহার করার সময় গোঁফ ফাঁক দেওয়ার টিপটি আমাকে সহায়তা করেছিল যা এজেএস ব্যবহার করে রেন্ডার করা হয়েছিল। ধন্যবাদ!

— মাইক্রব

ভিউ থেকে টেমপ্লেটগুলি ব্যবহার করতে, আপনার পৃষ্ঠাগুলির মার্কআপে নিম্নলিখিতগুলি থাকতে পারে: <স্ক্রিপ্ট টাইপ = "পাঠ্য / টেমপ্লেট" id = "আমার-টেম্পলেট"> <ডিভ> <% - নাম%> </div> </ স্ক্রিপ্ট > এবং তারপরে আপনার জেএসে নিম্নলিখিতটি করুন: var html = _.template ($ ('# আমার-টেম্পলেট') h html (), {নাম: "জন স্মিথ"});

— গৌরব গুপ্ত

@ আইভেলসিলারি - আপনার interpolateটিপটি কাজ করে নি, তবে এটি করেছে:_.templateSettings = { interpolate: /\{\{\=(.+?)\}\}/g, escape: /\{\{\-(.+?)\}\}/g, evaluate: /\{\{(.+?)\}\}/g };

— ভাইসাইক

Answer 4

টেম্পলেট করার জন্য ডকুমেন্টেশনটি আংশিক, আমি উত্সটি দেখেছি।

_.Template ফাংশন 3 আর্গুমেন্ট আছে:

1. স্ট্রিং টেক্সট : টেমপ্লেট স্ট্রিং
2. অবজেক্ট ডেটা : মূল্যায়নের ডেটা
3. অবজেক্ট সেটিংস : স্থানীয় সেটিংস, _.টিম্পলেটসেটিংস হ'ল গ্লোবাল সেটিংস অবজেক্ট

যদি কোনও ডেটা (বা নাল) দেওয়া না হয় তবে একটি রেন্ডার ফাংশনের চেয়ে ফিরে আসবে। এটির 1 টি যুক্তি রয়েছে:

1. অবজেক্ট ডেটা : উপরের ডেটার মতোই

সেটিংগুলিতে 3 রেজেক্স প্যাটার্ন এবং 1 টি স্ট্যাটিক প্যারামিটার রয়েছে:

1. RegExp মূল্যায়ন করুন : টেমপ্লেটের স্ট্রিংয়ে "<% কোড%>"
2. RegExp ইন্টারপোল্ট : টেম্পলেট স্ট্রিংয়ে "<% = কোড%>"
3. রেজিপ্যাক্স এড়ানো : "<% - কোড%>"
4. স্ট্রিং ভেরিয়েবল : alচ্ছিক, টেম্পলেট স্ট্রিংয়ের ডেটা প্যারামিটারের নাম

একটি মূল্যায়ন বিভাগের কোডটি সহজভাবে মূল্যায়ন করা হবে। আপনি এই বিভাগ থেকে __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 : // : 30corejs.org/#template

টেমপ্লেট লোড করে আপনার কাছে অনেকগুলি বিকল্প রয়েছে তবে শেষে আপনাকে সর্বদা টেমপ্লেটটিকে স্ট্রিংয়ে রূপান্তর করতে হবে। আপনি এটিকে উপরের উদাহরণের মতো স্বাভাবিক স্ট্রিং হিসাবে দিতে পারেন, বা আপনি এটি কোনও স্ক্রিপ্ট ট্যাগ থেকে লোড করতে পারেন এবং jquery এর .html () ফাংশনটি ব্যবহার করতে পারেন, অথবা আপনি এটিকে প্রয়োজনীয় . 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>

এটি এইচটিএমএল

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

এটি জাভাস্ক্রিপ্ট কোড যা এইচটিএমএলে জেসন অবজেক্ট এবং টেমপ্লেট রাখে

   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

তাহলে আপনার এটির মাধ্যমে ডিফল্ট ইঞ্জিনটি এইচটিএমএল টেমপ্লেটে পরিবর্তন করা উচিত:

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

এইচটিএমএল এক্সটেনশনের জন্য আন্ডারস্কোর টেম্পলেট ইঞ্জিনটি নিবন্ধ করুন:

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

এটা শেষ!

এখন লোডের জন্য উদাহরণস্বরূপ 'index.html' নামে একটি টেম্পলেট:

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

হতে পারে আপনাকে আন্ডারস্কোর মডিউলটি ইনস্টল করতে হবে।

npm install underscore --save

আমি আশা করি এটি আপনাকে সাহায্য করেছে!

Answer 7

আমি আরও একটি গুরুত্বপূর্ণ অনুসন্ধান ভাগ করতে চেয়েছিলাম।

<% = পরিবর্তনশীল => ব্যবহারের ফলে ক্রস-সাইট স্ক্রিপ্টিং দুর্বলতা দেখা দেয়। সুতরাং এর পরিবর্তে <% - পরিবর্তনশীল -> ব্যবহার করা এর আরও সুরক্ষিত।

ক্রস-সাইট স্ক্রিপ্টিং আক্রমণগুলি রোধ করতে আমাদের <% = <% এর সাথে প্রতিস্থাপন করতে হয়েছিল। নিশ্চিত না, এটির পারফরম্যান্সে কোনও প্রভাব পড়বে কিনা

Comments

+1 আমি আমার উদাহরণে এক্সএসএস সম্পর্কে একটি নোট যুক্ত করেছি। এটি একটি ওয়েব পৃষ্ঠায় অযৌক্তিকর ব্যবহারকারীর তথ্য ইনজেকশন সম্পর্কে সত্যিই ভাল পয়েন্ট। হয় কোনও টেম্পলেট ইঞ্জিন বা এমনকি h .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");

যেখানে পপআপ একটি ডিভ যেখানে আপনি টেবিলটি তৈরি করতে চান