JavaScript的模板，生成HTML

Question

的块里面我的JavaScript的AJAX功能，我生成HTML的块如下：

$.each(data.pages, function(k, v) { 

    pageData += '<div class="entry activity page-panel event-item">'; 

    pageData += '<div class="page-panel-inner">'; 

    pageData += '<h2><a href="'+v.url+'">'+v.title+'</a></h2>'; 

    pageData += '<span class="date">'+v.date+'</span>'; 

    pageData += '</div>'; 

    pageData += '<a href="'+v.url+'"><img src="'+v.image+'" alt="'+v.title+'"></a>'; 

    pageData += '<div class="page-panel-inner event-item-details">';   
    pageData += '<p><strong>Location: </strong>Whitchurch</p>'; 
    pageData += '<p><strong>Time: </strong>18.00 - 22.00</p>'; 
    pageData += '<p><strong>Price: </strong>£31 for 10 weeks</p>'; 

    pageData += '</div>'; 
    pageData += '</div>'; 

}); 

我读过一些关于JavaScript的模板，但不知道怎么用在这种情况下的模板？有没有更好的方法来在JavaScript中生成大块的html？

道歉这不是一个有问题的问题与正确的答案我不知道还有什么要问。

Answer 1

有很多不同的方式使用模板引擎，所以明白，这只是一个。有些系统使用“编译”步骤将模板翻译成JavaScript，而其他系统更像解释器。我只亲自熟悉一个（doT），这有点不寻常，所以我基本上只是为了这个例子组成一个假装系统。

某些模板引擎的一个常见技巧是将模板内容存储在<script>标记中。听起来很奇怪，就像我们回到了我们的起始位置，但在这种情况下，它是一个带有“类型”的<script>标签，导致浏览器忽略它作为未知的脚本语言。 （请注意，这里还有HTML5的<template>标签，但我没有太多的经验与它和我不知道它如何妥善处理零碎的标记。）

所以：

<script id=robs-template type="text/html-template"> 
    <div class="entry activity page-panel event-item"> 
    <div class="page-panel-inner"> 
     <h2><a href="{{! it.url }}">{{! it.title }}</a></h2> 
     <span class="date">{{! it.date }}</span> 
    </div> 
    <a href="{{! it.url }}"><img src="{{! it.image }}" title="{{! it.title }}"></a> 
    <div class="page-panel-inner event-item-details"> 
     <p><strong>Location: </strong>Whitchurch</p> 
     <p><strong>Time: </strong>18.00 - 22.00</p> 
     <p><strong>Price: </strong>£31 for 10 weeks</p> 
    </div> 
    </div> 
</script> 

在模板中，{{ }}丛块中的内容表示请求模板系统从参数对象中删除内容。这个想法是，当模板系统被调用时，会提供一个参数对象（不知何故;取决于系统）。

要以“喂”它的模板系统，获取该模板的内容，你可以用简单的jQuery：

var templateCode = $("#robs-template").html(); 

与我编造的模板系统，你可能会在模板转换成一些HTML准备注入页面是这样的：

var rendered = FakeTemplates(templateCode, { 
    url: "http://whatever", 
    title: "Something", 
    image: "http://cats.com/small-kitten1.jpg", 
    date: "12 Jun 2015" 
}); 

现在你在“渲染”的对象完全与模板轮廓数据的合并的变量已经有了。

一些模板引擎只直接对DOM操作，因此这可能看起来更像：

$("#place-to-put-stuff").fakeTemplates(templateCode, { 
    url: "http://whatever", 
    title: "Something", 
    image: "http://cats.com/small-kitten1.jpg", 
    date: "12 Jun 2015" 
});