Question

我要在javascript中使用text加载templates。太糟糕了（我知道）。但是，当我通过Ajax / PHP / JSON获取结果时，它很优雅，但结果的提取有点慢。我正在弹出一个问题。所以我再次回到模板。我的问题是： “是否有任何工具可以自动将HTML代码解析为javascript”。

实施例：在HTML中，以下代码

<ul class="tabs">
    <li><a href="#" name="#tab1">Introduction</a></li>
    <li><a href="#" name="#tab2">Round</a></li>
    <li><a href="#" name="#tab3">Rules</a></li>
</ul>

在javascript中变为：

'<ul class="tabs">'+
    '<li><a href="#" name="#tab1">Introduction</a></li>'+
    '<li><a href="#" name="#tab2">Round</a></li>'+
    '<li><a href="#" name="#tab3">Rules</a></li>'+
'</ul>'+

还有其他方法吗？

Answer 1

以下是an example如何使用隐藏的<code>元素执行此操作。 Facebook广泛地做到了这一点。

HTML：

<div>here is some normal content</div>
<code class="template" id="template1"> 
  <div>this is a template</div>
</code>

<div id="renderedTemplate"></div>

脚本：

var template = $("#template1").html();
var templateOutput = $("#renderedTemplate");

for( var i = 0; i < 10; i++ ){
    templateOutput.append(template);  
}

CSS：

.template {
  display: none;
}

然而，由于你不是Facebook，所以让你的生活更轻松，并使用像@Shmiddty建议的Handlebars之类的东西。它使用了类似的方法，但在混合中添加了强大的模板功能，而不是逐字插入字符串。

Answer 2

将内容放入隐藏的div中，并使用jquery的.html（）方法加载它。

Answer 3

<button>Show it</button>
<p style="display: none">Hello 2</p>

$("button").click(function () {
    $("p").show("slow");
});

http://api.jquery.com/show/

在javascript中包含HTML

3 个答案: