如何正确使用html脚本模板答案

【问题标题】：how to use html script template correctly如何正确使用html脚本模板
【发布时间】：2015-05-24 17:48:16
【问题描述】：

我必须自动生成一些 li 元素，并且我通过一个在循环内返回文本的函数来执行它的方式，如下所示：

function getLi(data) {
   return '<li>' + data + '</li>';
}

然后我找到了一种更好的方法，即在 div 中编写 html：

<div style="display:none;" id="Template">
   <li id="value"></li>
</div>

然后我会更改 id 和 value 获取 html 并将元素重置为原始状态：

var element = $("#value");
element.html(data);
element.attr('id', getNewId());
var htmlText = $("#Template").html();
element.html('');
element.attr('id', 'value');
return htmlText;

然后我正在阅读脚本模板

我认为这可能是一种更好的方法，
但是应用前面的代码不起作用，因为根据this article，内部元素不存在

那么我该如何应用呢？

编辑： 我放了一个 ul 标签，我用这个方法来动态获取项目

EDIT2：

<li>
   <a href="#" >
   <span>
   <span>
some text
   </span>
   </span>
</li>

这不一定是我所拥有的，而是沿途的一些东西

编辑3： 我的 ul 不存在，它是动态生成的我坚持这不是重复我想知道如何使用带有一些动态变量的模板

【问题讨论】：

第一种方式比较好，但是需要修改。顺便问一下，你如何处理生成的 LI？最好多了解一些上下文。
好的，我已经发布了我的看法。看看吧。
jQuery: how to add <li> in an existing <ul>?的可能重复
@tawfekov 不是重复的，问题很清楚我要使用模板
你为什么不用handlebarsjs.com？

标签： javascript jquery html

【解决方案1】：

您可以通过以下方式进行操作。它干净、可重用且可读。

//A function that would return an item object
function buildItem(content, id) {

    return $("<li/>", {
        id: id,
        html: content
    });
}

在您的循环中，您可以执行以下操作。不要在循环中附加每个 LI，因为 DOM 操作成本很高。因此，生成每个项目并堆叠一个如下所示的对象。

var $items = $();
// loop begin
var contents = ['<a href="#"><span><span>', data, '</span></span></a>'].join('');
var $item = buildItem(contents, getNewId());
$items.add($item);
// loop end

就在循环之外。将这些生成的 LI 附加到所需的 UL，如下所示。

$("ul").append($items);

这就是我要做的，我相信还有很多更好的方法。希望对您有所帮助。

【讨论】：

我不能用这个，因为我的 li 实际上有内部元素，但为了简单没有放它们
您可以根据需要重新调整该函数的用途，包括孩子。
嗯，你能告诉我怎么做吗？我是 jquery 的新手。
查看我的编辑。您几乎可以将任何内容作为 LI 的子级传递。

【解决方案2】：

一种选择是升级到现代 JavaScript 框架，例如 AngularJS，然后您可以使用 ng-repeat 在一行中完成。

这将达到你的目的，让你作为开发者赚更多的钱。

【讨论】：

【解决方案3】：

如果您要重复此操作，请使用模板系统。喜欢{{ mustache }} 或Handlebars.js。

如果没有，你可以这样做。

<ul>
  <li class="hidden"></li>
</ul>

在 Javascript 中

$('ul .hidden').clone().removeClass('hidden').appendTo('ul');

当然还有 CSS

.hidden { display:none }

【讨论】：

【解决方案4】：

试试这个...

function getLi(data,ID) {
   return $('<li id = "'+ ID + '">' + data + '</li>');
}

它返回 Li.. 的 javascript 对象，你可以将它附加到任何你需要的地方。

【讨论】：

【解决方案5】：

您需要的是使用 jquery 模板，在下面的链接中您可以使用我正在使用的好模板。您创建模板并准备 JASON 数据对象。之后，每件事都将在一个函数调用中准备就绪，更多详细信息请参见此链接。

jquery.tmpl

希望这对您和将来来这里的任何人有所帮助..

【讨论】：