Question

我的问题是JS模板引擎是如何工作的。

例如，我的模板看起来像这样：

<div class="my-block"> 
   <h1>{{title}}</h1>
   <p>{{description}}</p>
</div>

......以及数据：

{
   title: 'Hello',
   description: 'World'
}

...它呈现为保存在某个变量中的DOM元素（只需将{{title}}和{{description}}替换为String replace()（类似this）：

<div class="my-block"> 
   <h1>Hello</h1>
   <p>World</p>
</div>

同时只出现这种类型的一个元素，但其中的值（标题和描述）会经常更改。

如何避免每次创建DOM元素（.my-block），并自动替换现有元素的{{title}}和{{description}}？

Answer 1

在代码中添加一些标记

<div class="my-block"> 
   <h1 class="slot-a">Hello</h1>
   <p class="slot-b">World</p>
</div>

然后更新它（为了简单起见使用jQuery，使用你想要的任何东西）

$('.my-block .slot-a').text(data.title);
$('.my-block .slot-b').text(data.description);

Answer 2

这已经有了一个公认的答案，但是这建议使用jQuery并编写代码来注入动态数据。我喜欢jQuery，有时编写代码很好，但这是一个关于模板使用的好问题。考虑到这一点，我将回答您的问题，并使用Transparency.js和Mustache.js来演示您的选择。

在DOM中维护元素并应用模板引擎时，您有两种选择。他们可以从那里开始（使用您的HTML发送）并使用基于DOM的模板引擎，或者您可以在script标记中包含标记，并使用基于字符串的模板引擎动态添加它们。 / p>

关于第一个选项，您仍然可以使用基于DOM的引擎（如Transparency或PURE）应用模板。透明度实际上要求您的HTML已经存在于DOM中并将就地操作其内容。对于简单模板，这非常有效。您是否可以在标记中的元素中添加类，ID或其他标识属性，这取决于您，这是一个缺点。以下是一个示例：

HTML（作为模板和存在于DOM中）：

<div class="my-block" id="myTemplate"> 
    <h1 class="title"></h1>
    <p class="description"></p>
</div>

JavaScript（期待包含jQuery或jQuery的库）：

$(function() {
    var data = {
        title: 'Hello',
        description: 'World'
    };

    $('#myTemplate').render(data);
});

这是一个jsFiddle：Transparency.js example

我建议为您的DOM元素添加一个id，这样您的DOM访问速度会快一些。这完全取决于你。

您还可以动态地将HTML添加到DOM。在这种情况下，您将希望以其他方式包含模板。一种简单的方法是使用带有script的{{1}}标记。浏览器不会将此文本放入DOM中，但可以使用像jQuery这样的库来访问它以提取其内容以进行模板化。下面是一个使用Mustache.js演示该方法的示例。

HTML（包括type="text/template"代码中的模板）：

script

JavaScript的：

<div class="my-block" id="myBlock"></div>

<script type="text/template" id="myTemplate">
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
</script>

这是一个jsFiddle：Mustache.js example

在第二个示例中，您需要DOM中的占位符div来输出模板化字符串，但您不需要包含$(function() { var data = { title: 'Hello', description: 'World' }; var template = $('#myTemplate').html(); var html = Mustache.render(template, data); $('#myBlock').html(html); });或h1元素，因为它们将被添加动态。

每种方法都有一些明显的优势。我个人喜欢Transparency.js及其兄弟姐妹，但它只适用于更简单的无逻辑模板。您还需要小心为元素添加属性。您可以在CSS中重复使用这些相同的属性，但是您开始将某些事情与某些事情联系起来，这很危险。

Mustache.js也是无逻辑的，但您不需要为生成的标记添加任何额外的属性，您只需要使用具有双花括号的Mustache语法。但是，您需要将模板包含在p标记中，或者您也可以尝试使用Hogan.js之类的东西来预编译Mustache。

我在最近发布的Github Pages网站上演示了一些其他的例子和Jade。您可以直接在页面上查看模板，并查看源代码以查看它们在JavaScript中的呈现方式。

链接：Templating Sandbox

有关Transparency.js的更多信息：Try Transparency

..和Mustache.js：Mustache.js on Github

Answer 3

在每个元素上调用.text以使用您的模型值进行设置。

重用JavaScript模板引擎中的元素

3 个答案: