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

使用模板引擎有很多不同的方法，所以要明白这只是一个。有些系统使用＆＃34;汇编＆＃34;将模板转换为JavaScript的步骤，而其他人更像是解释器。我只是亲自熟悉一个（doT）并且它有点不寻常，所以我基本上只是为了这个例子而组成一个伪装系统。

某些模板引擎的常见技巧是将模板内容存储在<script>标记中。听起来很奇怪，就像我们回到我们开始的地方一样，但在这种情况下它是<script>标签，带有＆＃34;类型＆＃34;这会导致浏览器将其忽略为未知的脚本语言。（请注意，还有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>

在模板内部，{{ }} clumps中的内容表示模板系统从参数对象中删除内容的请求。我们的想法是，当调用模板系统时，将提供一个参数对象（以某种方式;取决于系统）。

要获取该模板内容，以便＆＃34; Feed＆＃34;它到模板系统，你可以使用简单的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"
});

现在你已经进入变量＆＃34;渲染＆＃34;将充满数据的对象与模板大纲合并。

某些模板引擎只能直接在DOM上运行，因此可能看起来更像：

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

javascript模板，生成html块

1 个答案: