Где popoup - это div, где вы хотите создать таблицу

аюсь узнать о новых применениях JavaScript как серверного языка и как функционального языка. Несколько дней назад я слышал о node.js и Express Framework. Затем я увидел, что underscore.js - это набор служебных функций. Я виделэтот вопрос по stackoverflow, Там написано, что мы можем использовать underscore.js в качестве движка шаблонов. Кто-нибудь знает хорошие учебники о том, как использовать underscore.js для шаблонов, особенно для начинающих, у которых меньше опыта работы с продвинутым javascript. Спасибо

 jeffdill226 янв. 2015 г., 03:03
Я только что ответил на аналогичный вопрос, который также принесет пользу вашему вопросу.stackoverflow.com/questions/28136101/retrieve-column-in-parse/...
 Shanimal08 февр. 2013 г., 01:48
В защиту «Люка» улучшенная версия руководства, по крайней мере, еще в мае, не использовала расширенные возможности.

Ответы на вопрос(8)

Вот, Имейте в виду только 3 вещи:

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

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

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

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

тогдаtpl({foo: "blahblah"}) будет представлен в строку<h1>Some text: blahblah</h1>

 Matt Parkins14 мая 2014 г., 17:25
-1, документация несовершенна по многим параметрам. Почти наверняка, что пользователь пришел сюда после просмотра документов. Плохой ответ.
 Zach Lysobey27 февр. 2013 г., 22:23
Я не понизил голос, но ваш ответ ничего не делает (кроме предложения ссылки), чтобы объяснить, как использовать underscore.js в качестве движка шаблонов. Ваш ответ обеспечивает быстрый «шпаргалка», возможно, для тех, кто уже получил его, но сам по себе это не ответ на вопрос. Я удивлен, что у него столько же голосов, сколько и у него.
 Jon z11 янв. 2012 г., 18:58
Я не понимаю, почему кто-то будет голосовать против, это Канонический ответ и указывает на инструкции на домашней странице проекта, это классический "научить человека ловить рыбу".
 LeeGee05 сент. 2012 г., 14:45
3. <% -%> - распечатать некоторые значения с экранированным HTML
 QueueHammer23 янв. 2012 г., 05:54
Я думаю, что они проголосуют против, потому что документация, которую они предоставляют, дает очень мало информации о том, как смешивать <% и <% = за пределами их единственного примера и как переключение с <% = на print () изменяет этот шаблон. Также при использовании «интерполяции» есть некоторые странные поведения, которые, вероятно, сделали бы сцену немного более подробным объяснением. Опять же, что не предусмотрено. Хотя я согласен, но это глупо, так как голосование за.

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

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>');
 vsync25 мар. 2014 г., 13:00
@evilcelery - твойinterpolate совет не сработал, но это сработало:_.templateSettings = { interpolate: /\{\{\=(.+?)\}\}/g, escape: /\{\{\-(.+?)\}\}/g, evaluate: /\{\{(.+?)\}\}/g };
 Gaurav Gupta18 янв. 2014 г., 05:40
Чтобы использовать шаблоны из представления, в разметке страницы может быть следующее: <script type = "text / template" id = "my-template"> <div> <% - name%> </ div> </ script > а затем выполните следующие действия в своем JS: var html = _.template ($ ('# my-template'). html (), {name: "John Smith"});
 micrub09 янв. 2014 г., 01:33
Подсказка интерполяции усов помогла мне при использовании представления express3, которое визуализировалось с использованием ejs. Спасибо!
<!-- 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 Список сгруппирован по первой букве (сложный пример с изображениями, вызовами функций, под-шаблонами). взрыв...JsFiddle Демонстрация взлома XSS, отмеченного @tarun_telang нижеJsFiddle Один нестандартный метод для создания под-шаблонов
 PHearst07 мар. 2013 г., 11:41
 Shanimal26 авг. 2013 г., 21:10
Ну, я думаю, хорошо бы отметить, что это не имеет значения. давайте посмотрим правде в глаза, все, что вы ставите там ложь. text / x-underscore - большая ложь, потому что я использую lodash, смеется :) В последнем JsFiddle я добавилtype="foo/bar" потому что я хочу, чтобы все знали, что это не имеет значения, пока браузер / сервер не распознает это и пытается что-то с этим сделать. Поскольку html не является типом сценария, я чувствую себя в безопасности с text / html (его использует Джон Резиг), foo / bar также работает :)
 mu is too short11 июн. 2014 г., 07:17
Люди все время со мной не согласны, я делаю все возможное, чтобы не воспринимать это лично (даже если это личное :). Я был сожжен непреднамеренными побочными эффектами незначительного разгильдяйства снова и снова, поэтому моя привычка - ошибаться на стороне строгости. Спецификации MIME-типа на самом деле резервные*/x-* типы для "выдуманного" использования, я не думаю, что естьtext/underscore введите официальные реестры, поэтому я используюtext/x-underscore потому что я параноик, и они действительно хотят меня достать.
 nickford02 нояб. 2018 г., 16:42
пусть будет известно, что демоверсия XSS больше не работает, потому что браузеры отказываются выполнять JS с неверным mimetype
 aschyiel06 авг. 2012 г., 20:14
Спасибо за то, что вы явно использовали тег сценария "text / html" в вашем примере; Я новичок в underscore.js и, к сожалению, неправильно истолковал документацию - приятно знать, что templateString не всегда нужно писать в строке.

Лодаш тоже тот же. Сначала напишите скрипт следующим образом:

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

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

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

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

 OriginalEXE07 мая 2015 г., 18:29
Именно то, что мне было нужно, большое спасибо!

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

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

 Shanimal03 янв. 2014 г., 17:13
+1 Я добавил заметку о XSS к своему примеру. Это действительно хороший момент для внедрения неанизированной пользовательской информации в веб-страницу. либо через шаблонизатор, либо даже через $ .html ().

я наблюдал за источником.

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

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

Если нетданные (или ноль) дано, чемоказывать функция будет возвращена. У него есть 1 аргумент:

объектданные : так же, какданные выше

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

RegExpоценивать : "<% code%>" в строке шаблонаRegExpинтерполировать : "<% = code%>" в строке шаблонаRegExpпобег : "<% - код%>"строкапеременная : необязательно, имяданные параметр в строке шаблона

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

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

побег раздел избегает HTML с_.побег на возвращаемое значение данного кода. Так что похоже, чем_.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.

Еще один вариант построить дом дерево слаконичный вместо шаблонов.

Ваш ответ на вопрос