如何正确使用html脚本模板

how to use html script template correctly

本文关键字：脚本 html 何正确      更新时间：2023-09-26

我必须自动生成一些li元素，我的方法是通过一个在循环中返回文本的函数来实现，比如：

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

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

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

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

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

然后我正在阅读脚本模板

我觉得这可能是一个更好的方法，
然而，根据本文，由于内部元素不存在，因此应用以前的代码不起作用

那么我该如何应用呢？

编辑：我放入一个ul标签，我使用此方法动态获取项目

第2版：

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

这不一定是我所拥有的，而是

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

您可以执行以下操作。它干净、可重复使用且可读。

//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);

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

一种选择是升级到像AngularJS这样的现代JavaScript框架，然后可以使用ng-reeat在一行中完成。

这将达到你的目的，并使你作为一个开发商赚更多的钱。

如果要重复此操作，请使用模板系统。像｛｛胡子｝｝或Handlebars.js.

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

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

在Javascript 中

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

还有CSS，当然还有

.hidden { display:none }

试试这个。。。

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

它返回李的javascript objest，您可以将它附加到任何需要的地方。

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

jquery.tmpl

希望这对你和将来来这里的人都有帮助。。

相关文章：