Pertanyaan Bagaimana cara menggunakan underscore.js sebagai mesin template?


Saya mencoba belajar tentang penggunaan baru javascript sebagai bahasa server dan sebagai bahasa fungsional. Beberapa hari yang lalu saya mendengar tentang node.js dan kerangka kerja ekspres. Kemudian saya melihat tentang underscore.js sebagai satu set fungsi utilitas. saya melihat pertanyaan ini pada stackoverflow . Ia mengatakan kita dapat menggunakan underscore.js sebagai mesin template. siapa pun tahu tutorial yang baik tentang cara menggunakan underscore.js untuk templating, terutama untuk biginners yang memiliki sedikit pengalaman dengan javascript lanjutan. Terima kasih


252
2018-01-24 05:13


asal


Jawaban:


Segala sesuatu yang perlu Anda ketahui tentang template garis bawah adalah sini. Hanya 3 hal yang perlu diingat:

  1. <% %> - untuk menjalankan beberapa kode
  2. <%= %> - untuk mencetak beberapa nilai dalam template
  3. <%- %> - untuk mencetak beberapa nilai HTML lolos

Hanya itu saja.

Contoh sederhana:

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

kemudian tpl({foo: "blahblah"}) akan diberikan ke string <h1>Some text: blahblah</h1>


445
2017-08-30 10:21



<!-- 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 Terima kasih @PHearst!
  • JsFiddle (terbaru)
  • JsFiddle Daftar dikelompokkan berdasarkan huruf pertama (contoh kompleks w / gambar, pemanggilan fungsi, sub-templat) garpu itu! semoga menyenangkan...
  • JsFiddle Demo hack XSS dicatat oleh @tarun_telang di bawah ini
  • JsFiddle Satu metode non-standar untuk melakukan sub-template

197
2017-08-31 14:35



Dalam bentuk yang paling sederhana Anda akan menggunakannya seperti:

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

Jika Anda akan menggunakan template beberapa kali, Anda harus mengkompilasi sehingga lebih cepat:

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

Saya pribadi lebih memilih sintaksis gaya Kumis. Anda dapat menyesuaikan penanda token template untuk menggunakan kurung kurawal ganda:

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

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

92
2017-10-12 15:43



Dokumentasi untuk templating bersifat parsial, saya menonton sumbernya.

Itu _.template fungsi memiliki 3 argumen:

  1. Tali teks : string template
  2. Obyek data : data evaluasi
  3. Obyek pengaturan : pengaturan lokal, _.templateSettings adalah objek pengaturan global

Jika tidak data (atau null) yang diberikan, daripada a memberikan fungsi akan dikembalikan. Ini memiliki 1 argumen:

  1. Obyek data : sama dengan data atas

Ada 3 pola regex dan 1 parameter statis dalam pengaturan:

  1. RegExp evaluasi : "<% code%>" dalam string template
  2. RegExp menambah : "<% = kode%>" dalam string template
  3. RegExp melarikan diri : "<% - kode%>"
  4. Tali variabel : opsional, nama data parameter dalam string template

Kode dalam sebuah evaluasi bagian akan dievaluasi secara sederhana. Anda dapat menambahkan string dari bagian ini dengan __p + = "mystring" perintah ke template yang dievaluasi, tetapi ini tidak direkomendasikan (bukan bagian dari antarmuka templating), gunakan bagian interpolasi daripada itu. Jenis bagian ini untuk menambahkan blok seperti jika atau untuk ke template.

Hasil dari kode di menambah bagian akan ditambahkan ke template yang dievaluasi. Jika null diberikan kembali, maka string kosong akan ditambahkan.

Itu melarikan diri bagian membebaskan html dengan _.melarikan diri pada nilai kembalian dari kode yang diberikan. Jadi ini mirip dengan _.escape (kode) dalam sebuah menambah bagian, tetapi lolos dengan \ karakter whitespace suka \ n sebelum meneruskan kode ke _.melarikan diri. Saya tidak tahu mengapa itu penting, itu dalam kode, tetapi bekerja dengan baik dengan menambah dan _.melarikan diri - yang tidak lepas dari karakter spasi-putih - juga.

Secara default data parameter dilewatkan oleh a dengan (data) {...} pernyataan, tetapi evaluasi semacam ini jauh lebih lambat daripada evaluasi dengan variabel bernama. Jadi menamai data dengan variabel parameter adalah sesuatu yang baik ...

Sebagai contoh:

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

hasil

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"

Anda dapat menemukan di sini lebih banyak contoh cara menggunakan templat dan mengesampingkan pengaturan default: http://underscorejs.org/#template

Dengan memuat template Anda memiliki banyak pilihan, tetapi pada akhirnya Anda selalu harus mengubah template menjadi string. Anda dapat memberikannya sebagai string normal seperti contoh di atas, atau Anda dapat memuatnya dari tag skrip, dan gunakan .html () fungsi jquery, atau Anda dapat memuatnya dari file terpisah dengan Plugin tpl dari require.js.

Pilihan lain untuk membangun pohon dom bersama singkat bukannya templating.


28
2018-02-19 18:11



Saya memberi contoh yang sangat sederhana

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

Hasilnya pasti

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

2) Ini adalah template

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

Ini adalah html

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

Ini adalah kode javascript yang berisi objek json dan menempatkan template ke 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}));
  });


22
2018-03-17 17:45



dengan mengungkapkan itu sangat mudah. semua yang Anda butuhkan adalah menggunakan mengkonsolidasikan modul pada node sehingga Anda perlu menginstalnya:

npm install consolidate --save

maka Anda harus mengubah mesin default ke template html dengan ini:

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

daftarkan mesin template garis bawah untuk ekstensi html:

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

selesai !

Sekarang untuk memuat misalnya sebuah template yang disebut 'index.html':

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

mungkin Anda perlu menginstal modul underscore.

npm install underscore --save

Saya harap ini membantu Anda!


14
2017-11-22 03:22



Saya ingin membagikan satu lagi temuan penting.

penggunaan <% = variabel => akan menghasilkan kerentanan skrip lintas situs. Jadi lebih aman untuk menggunakan <% - variabel -> sebagai gantinya.

Kami harus mengganti <% = dengan <% - untuk mencegah serangan skrip lintas situs. Tidak yakin, apakah ini akan berdampak pada kinerja


12
2018-04-04 12:49



Lodash juga sama Pertama tulis skrip sebagai berikut:

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

Sekarang tulis beberapa JS sederhana sebagai berikut:

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

Di mana popup adalah div di mana Anda ingin menghasilkan tabel


1