最小的jQuery模板

我正在创建一个用户界面，用户可以在其中添加/删除项目（类似的布局）。最小的jQuery模板

它从一个项目开始，你可以点击'添加'来添加更多。 UI由几种不同类型的项目组成。

什么我目前做的是填充单个项目item 1（每类）和add事件，我克隆item 1，代替用户完成的改变在item 1并追加克隆到container。简而言之，我不是用jQuery动态创建html，而是克隆了div的html。但是在这种方法中，我不得不改变很多东西来保持新项目的初始状态。

所以，我想避免更换由用户完成编辑，所以我想类似下面，

<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')创造新项目。

我知道有像handlebar和mustache这样复杂的库，下划线有自己的模板实现方式。

但我没有使用任何这些，因此不想仅仅包含它们来复制内容。我不想要任何特别的东西。我没有传递变量。我只是克隆一些标记来反复使用。

是这种方式插入html在script标签，去所有的浏览器工作？这是一个好方法吗？

编辑：

及其对WP插件，我以为JS被打开，否则插件不会反正工作。

来源

2013-03-19 Jashwant

中了解本课，他们并不复杂，他们是图书馆，只需尝试一下。至少你会直接设计你的模板而不是写自己的引擎！ – 2013-03-19 04:54:54

我只是想复制一些HTML。为什么我会为此使用一个库？ – Jashwant 2013-03-19 05:15:23

什么：

你的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-19 04:57:11

我不想传递一些参数。 – Jashwant 2013-03-19 05:16:33

对不起，固定...没有参数传递！ – 2013-03-19 09:00:09

你没读过我的问题。我知道我可以做到这一点。我提到了同样的问题。我问它是否可以跨浏览器使用？（如果您之前已经使用过）或者您有更好的方法。另外，你为什么要做'$（tempalteHtml）'？其完全多余的 – Jashwant 2013-03-19 09:49:14

第1步：创建模板里面它
第2步的HTML文件：使用jQuery的load()方法，打电话给你的HTML模板成div元素在主HTML文件：

$("#main-div").load("yourtemplate.html")
第3步：惊奇

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

如果它是包含应用程序自上具有确定支持的浏览器已知的环境，并与同样坚定的设置（例如，如果JavaScript是对与否），然后是啊，肯定的。为什么不？

如果它在每一个浏览器中向公众开放，可能有很多不同的配置，那么不，这是一个可怕的想法。如果您的用户没有启用JavaScript，那么您的内容不会显示。另外，如果你的脚本中有一个脚本中断了，那么你就再没有内容了。您可以从Gawker made this same mistake

来源

2013-03-19 05:01:47 SomeShinyObject

最小的jQuery模板

回答

相关问题