1

我正在创建一个 UI，用户可以在其中添加/删除项目（类似布局）。

它从一项开始，您可以单击“添加”以添加更多。UI 由几种不同类型的项目组成。

我目前正在做的是填充单个项目item 1（每种类型），并且在add事件中，我克隆item 1，替换用户所做的更改item 1并将克隆附加到container. 简单来说，我不是使用 jQuery 动态创建 html，而是克隆div. 但是在这种方法中，我不得不改变很多东西来保持新项目的初始状态。

所以，我想避免替换用户所做的编辑，所以我想像下面这样，

<script type="text/template" id="item_type1">
  <div>
    <div>Box</div>
  </div>
</script>

<script type="text/template" id="item_type2">
  <div>
    <div>Box2</div>
  </div>
</script>

在add活动中，我想做一些类似的事情$('#item_type1').html()并$('#item_type2')创建新项目。

我知道有一些复杂的库，比如把手和小胡子，下划线有自己的实现模板的方式。

但我还没有使用任何这些，因此不想仅仅为了复制内容而包含它们。我不想要任何特别的东西。我没有传递变量。我只是在克隆一些标记以便一次又一次地使用。

这种插入标签的方式是否适用于所有浏览器html？script这是一个好方法吗？

编辑：

它用于 wp 插件，我假设 js 已打开，否则插件无论如何都无法工作。

4

2 回答 2

2

关于什么：

例如，您的 HTML 应该是：

<script type="text/template" id="item_type1">
  <div>
    <h1>Box1</h1>
    <p>
    </p>
  </div>
</script>

你的代码是：

var templateHtml = $('#item_type1').html();

var $item = $(templateHtml);
$('body').append($item);
$item.on('click', function() {});

这是一种适用于所有浏览器的简单方法。

于 2013-03-19T04:57:11.913 回答
0
  • 第 1 步：创建一个 HTML 文件，其中包含您的模板

  • 第 2 步：使用 jQuery 的load()方法，将您的 HTML 模板调用到div主 HTML 文件中的一个元素中：

    $("#main-div").load("yourtemplate.html")

  • 第 3 步：感到惊讶

这是一个好主意吗？这取决于：

如果它是一个在已知环境中的自包含应用程序，具有确定的受支持浏览器和同样确定的设置（例如 JavaScript 是否打开），那么是的，当然。为什么不？

如果它在每个可能具有许多不同配置的浏览器中向公众开放，那么不，这是一个可怕的想法。如果您的用户没有启用 JavaScript，那么您的内容就不会显示。此外，如果您的某个脚本在生产中中断，那么您将再次没有内容。你可以从Gawker 犯同样的错误时吸取教训

于 2013-03-19T05:01:47.480 回答