Underscore.js / Улучшение / Плагины Bootstrap

Версия: v1.13.1

Каталог: Плагины Bootstrap

Категория: Улучшение

Для Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, WHMCS

Язык: Английский

Вес файла: 1.25 Mb

Уникальный ID: 4748

Посмотрели: 589 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 14 раз

Прокомментировали: 0 раз

Рейтинг: 2.6 / 5 - 5 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/jashkenas/underscore

Информация: Пользователям

Информация: Правообладателям

Теги: underscore, Underscore.js, Bootstrap, Plugin

Поделился: BootstrapТема

Добавлено: 2021-08-20 в 15:05

Метка: 1629461120

⇄ ⇅

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo Underscore.js - BootstrapTema</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" />
</head>
<body>

<h1>
 Looking At Underscore.js Templates
 </h1>

<script type="text/template" class="template">

<%- listItem.name %>

<% if ( listItem.hasOlympicGold ){ %>
 <em>*</em>
 <% } %>

</li>

<% }); %>
 </ul>

<% var showFootnote = _.any(
 _.pluck( rc.listItems, "hasOlympicGold" )
 ); %>

<% if ( showFootnote ){ %>

<p>

<em>* Olympic gold medalist</em>

</p>

<% } %>

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
 <script type="text/javascript">

// When rending an underscore template, we want top-level
 // variables to be referenced as part of an object. For
 // technical reasons (scope-chain search), this speeds up
 // rendering; however, more importantly, this also allows our
 // templates to look / feel more like our server-side
 // templates that use the rc (Request Context / Colletion) in
 // order to render their markup.
 _.templateSettings.variable = "rc";

// Grab the HTML out of our template tag and pre-compile it.
 var template = _.template(
 $( "script.template" ).html()
 );

// Define our render data (to be put into the "rc" variable).
 var templateData = {
 listTitle: "Olympic Volleyball Players",
 listItems: [
 {
 name: "Misty May-Treanor",
 hasOlympicGold: true
 },
 {
 name: "Kerri Walsh Jennings",
 hasOlympicGold: true
 },
 {
 name: "Jennifer Kessy",
 hasOlympicGold: false
 },
 {
 name: "April Ross",
 hasOlympicGold: false
 }
 ]
 };

// Render the underscore template and inject it after the H1
 // in our current DOM.
 $( "h1" ).after(
 template( templateData )
 );

</script>
</body>
</html>

BootstrapTema

Underscore.js

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0