Question

不使用任何模板引擎我经常写这样的东西

success(data) {
  var html = '';
  if (data) {
    $.each(data.result, function() {
      html += '<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">'
      html += '<span class="icon-bar"></span>'
      html += '<span class="icon-bar"></span>'
      html += '<span class="icon-bar"></span>'
      html += '</button>'
    });
    $('something').append(html);

  }
}

如果我想要的html很大，那么很难阅读，任何方法都可以在我的情况下保留缩进？

Answer 1

您可以使用反引号来定义多行字符串：

var buttonTemplate = `<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>`;

if (data) {
  $.each(data.result, function() {
    $(buttonTemplate).appendTo('#something');
  });
}

这是工作demo。

注意它是ECMAScript 6标准的一部分，可能无法在某些浏览器中使用：
ES6 Template Strings compatibility table

Answer 2

您可以在一个更容易处理的数组中创建和存储模板。还可以存储多个模板并按照它使用

Templates = {};
Templates.temp = [
    `<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>`
].join("\n");

if (data) {
  $.each(data.result, function() {
   $('#something').append($(Templates.temp));  // into jQuery object
  });
}

注意：“”在连接（“\ n”）中与单引号连接不同（'\ n'）

Answer 3

在html中，将模板保存在类型为text/template的脚本标记中（任何类型，类型不等于text/javascript，浏览器都会忽略该模板。）

<script type="text/template" id="btnTpl">
<button type="button" class="btn btn-navbar" data toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
</script>

然后你可以在你的javascript代码中使用它：

var buttonTpl = $('#btnTpl').html();
if (data) {
  $.each(data.result, function() {
    $(buttonTpl).appendTo('#something');
  });
}

在javascript中使用HTML保留缩进格式

3 个答案: