将html放入变量时保持美化的缩进结构？

Question

从编码开始，JS，今天多亏了 JS，我在 HTML 中多次注入了一个 HTML 模板。但是，我对缩小 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>
"

提前致谢，

Answer 1

出于模板的目的，您应该查看Handlebars.js homepage 上的示例：

声明你的模板

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

Answer 2

你可以这样做：

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

如果你真的想要...

但是，如果您在 mustache JS 中表示模板（只需查看您的标签），我个人将模板添加到脚本元素中，然后按照某些模板库的建议使用 innerHTML 访问它们（例如handlebarsjs.com）。

例如：

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