javascript模板，生成html块

在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块

---

抱歉，这不是一个有正确答案的问题，我不知道还有什么地方可以问。

使用模板引擎有很多不同的方法，请理解这只是其中之一。一些系统使用编译步骤将模板转换为JavaScript，而其他系统更像是解释器。我个人只熟悉一个，它有点不寻常，所以为了这个例子的目的，我将基本上构建一个假装系统

一些模板引擎的一个常见技巧是将模板内容隐藏在标记中。听起来很奇怪，好像我们回到了起点，但在本例中，它是一个带有类型的标记，导致浏览器将其作为未知脚本语言忽略。请注意，还有HTML5标记，但我对它没有太多经验，也不确定它处理零碎标记的效果如何

因此：

使用我自己制作的模板系统，您可以将模板转换为一些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"
});

---

模板机制肯定比这更好。远没有那么混乱和容易出错。是的，我觉得“凌乱”的元素很烦人。有时很难阅读代码，尤其是当这些代码块变大时。我去看看。我想试试车把，你有经验吗？我没用过车把；然而，我是doT.js的超级粉丝。但是人们选择一个而不是另一个有很多不同的原因。我将如何在我的场景中使用模板？感谢教程，如果它是一个项目数组呢？@RobMorris不同的模板系统有更复杂的结构来处理循环、条件扩展等。

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

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