Как использовать underscore.js в качестве механизма шаблона?

Ответ 1

Все, что вам нужно знать о шаблоне подчеркивания, здесь. Только 3 вещи, которые нужно иметь в виду:

• <% %> - выполнить некоторый код
• <%= %> - для печати некоторого значения в шаблоне
• <%- %> - для печати некоторых значений, экранированных HTML

Что все об этом.

Простой пример:

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

то tpl({foo: "blahblah"}) будет отображаться в строке <h1>Some text: blahblah</h1>

Ответ 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/images, function calls, sub-templates) fork it! есть взрыв...
• JsFiddle Демонстрация взлома XSS, отмеченная @tarun_telang ниже
• JsFiddle Один нестандартный метод для создания суб-шаблонов

Ответ 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>');

Ответ 4

Документация для шаблонов является частичной, я смотрел источник.

Функция _. template имеет 3 аргумента:

• Строка текст: строка шаблона
• Объект данные: данные оценки
• Объект настройки: локальные настройки, _. templateSettings - это объект глобальных настроек

Если не указано data​​strong > (или null), то будет возвращена функция render. Он имеет 1 аргумент:

• Объект данные: то же, что и данные выше

В настройках есть 3 шаблона регулярных выражений и 1 статический параметр:

• RegExp оцените: "<% code% > " в строке шаблона
• RegExp интерполировать: "<% = code% > " в строке шаблона
• RegExp escape: "<% - code% > "
• Строка переменная: необязательная, имя параметра data​​strong > в строке шаблона

Код в разделе оценить будет просто оценен. Вы можете добавить строку из этого раздела с помощью команды __p + = "mystring" к оцениваемому шаблону, но это не рекомендуется (не входит в интерфейс шаблонов), вместо этого используйте секцию интерполяции. Этот тип раздела предназначен для добавления блоков, таких как if или для шаблона.

Результат кода в разделе интерполировать добавляется к оцениваемому шаблону. Если null возвращен, добавлена ​​пустая строка.

Раздел escape экранирует html с _. escape в возвращаемом значении данного кода. Таким образом, он похож на _. Escape (code) в разделе интерполировать, но он пропускает с \ символы пробела, такие как n, прежде чем передать код в _. escape. Я не знаю, почему это важно, это в коде, но оно хорошо работает с интерполяцией и _. Escape, которая не выходит за пределы пробела символы - тоже.

По умолчанию параметр data​​strong > передается оператором с (данными) {...}, но этот вид оценки намного медленнее, чем оценка с помощью имени переменная. Таким образом, присвоение данных с параметром переменной - это что-то хорошее...

Например:

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 a line break"
    },
    {
        variable: "o"
    }
);

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

Результаты

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

Здесь вы можете найти больше примеров использования шаблона и переопределения настроек по умолчанию: http://underscorejs.org/#template

При загрузке шаблона у вас есть много вариантов, но в конце вам всегда нужно преобразовать шаблон в строку. Вы можете указать его как обычную строку, как в примере выше, или вы можете загрузить ее из тега script и использовать . Html() функции jquery, или вы можете загрузить его из отдельного файла с плагин tpl require.js.

Еще один вариант построения дерева dom с laconic вместо шаблонов.

Ответ 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>

Это javascript-код, содержащий 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}));
  });

Ответ 6

выразить так легко. все, что вам нужно, это использовать модуль консолидировать на node, поэтому вам нужно его установить:

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

Надеюсь, это помогло вам!

Ответ 7

Я хотел поделиться еще одним важным нахождением.

использование <% = variable = > приведет к уязвимости межсайтового скриптинга. Поэтому его более безопасно использовать <% - variable → вместо этого.

Нам пришлось заменить <% = на <% - для предотвращения атак с межсайтовыми сценариями. Не уверен, будет ли это иметь какое-либо влияние на производительность.

Ответ 8

Lodash - тоже то же самое Сначала напишите script следующим образом:

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

Теперь напишите несколько простых JS следующим образом:

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, где вы хотите сгенерировать таблицу