Сохранять украшенную структуру отступов при помещении html в переменную?

Начав с кодирования, JS, сегодня я несколько раз вставляю HTML-шаблон в HTML благодаря JS. Однако меня смущает систематическая необходимость минимизировать отступы html и складывать все дюжины строк --div, h1, span, table, tr, td, tt-- в одну строку var. Минимизированный HTML-код сложнее подготовить, и его часто нужно дорабатывать на этапе тестирования.

Также: есть ли способ сохранить улучшенный HTML-код с отступом в переменной?

Некоторый синтаксис, чтобы иметь действительную версию:

var exampleTpl = "
      <div data-demo-html="true">
        <div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="d">
          <div data-role="collapsible" data-collapsed="false">
            <h4>Heading</h4>
            <ul data-role="listview" data-filter="false" data-inset="true">
              <li><a href="#">List item 1</a></li>
              <li><a href="#">List item 2</a></li>
              <li><a href="#">List item 3</a></li>
            </ul>
          </div>
"

Заранее спасибо,


javascript templates handlebars.js var mustache
person Hugolpz    schedule 30.01.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

В качестве шаблона вам следует взглянуть на пример на домашней странице Handlebars.js:

Объявите свой шаблон

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

Скомпилируйте шаблон в JavaScript

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

Раздувать HTML

var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);

Это приведет к экземпляру вашего шаблона (значение, введенное в ваш шаблон):

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>
person Édouard Lopez    schedule 31.01.2013

arrow_upward
0
arrow_downward

Вы МОЖЕТЕ сделать это так:

var exampleTpl =
      '<div data-demo-html="true">' + 
        '<div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="d">' +
          '<div data-role="collapsible" data-collapsed="false">' +
            '<h4>Heading</h4>' +
            '<ul data-role="listview" data-filter="false" data-inset="true">' +
              '<li><a href="#">List item 1</a></li>' +
              '<li><a href="#">List item 2</a></li>' +
              '<li><a href="#">List item 3</a></li>' +
            '</ul>' +
          '</div>' +
        '</div>' +
      '</div>';

Если бы ты действительно хотел...

Однако, если вы представляете шаблон в JS с усами (просто глядя на ваши теги), я лично добавляю шаблоны в элемент сценария, а затем получаю к ним доступ с помощью innerHTML, как это предлагается некоторыми библиотеками шаблонов (такими как handlebarsjs.com). ).

eg:

    <script type="text/html" id="myTemplate">
     <div data-demo-html="true">
        <div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="d">
          <div data-role="collapsible" data-collapsed="false">
            <h4>Heading</h4>
            <ul data-role="listview" data-filter="false" data-inset="true">
              <li><a href="#">List item 1</a></li>
              <li><a href="#">List item 2</a></li>
              <li><a href="#">List item 3</a></li>
            </ul>
          </div>
        </div>
      </div>
    </script>
person ndtreviv    schedule 30.01.2013
comment
Интересно, есть ли синтаксис, который просто идеален, без «+», было бы круто. Спасибо и за твой трюк - person Hugolpz; 30.01.2013
comment
@Hugolpz Я обновил ответ. Это больше похоже на то, на что вы надеялись? Вы на самом деле используете усы JS? - person ndtreviv; 30.01.2013
comment
Я бы не рекомендовал использовать type="text/html" с шаблоном, браузер может попытаться интерпретировать шаблон как HTML и все испортить. - person mu is too short; 01.02.2013
comment
@muistooshort это не доставляло мне никаких проблем в прошлом, но я вижу, что рули обновили свои примеры, чтобы использовать text/x-handlebars-template - так что, вероятно, это хороший вызов. Лучше для семантики. - person ndtreviv; 03.02.2013