2

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

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

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

...和数据：

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

...它呈现为 DOM 元素，该元素被保存到某个变量中（只需通过替换{{title}}and {{description}}with String replace()（类似这样的东西）：

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

这种类型的元素一次只存在一个，但其中的值（标题和描述）经常更改。

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

4

3 回答 3

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);
于 2013-03-11T17:53:19.030 回答
1

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

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

关于第一个选项，您仍然可以使用基于 DOM 的引擎（例如 Transparency 或 PURE）应用模板。Transparency 实际上期望您的 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 示例

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

您还可以将 HTML 动态添加到 DOM。在这种情况下，您需要以其他方式包含模板。一种简单的方法是使用script带有type="text/template". 浏览器不会将此文本放入 DOM，但可以使用 jQuery 之类的库来提取其内容以进行模板访问。这是一个使用 Mustache.js 演示该方法的示例。

HTML（包括script标签内的模板）：

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

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

JavaScript：

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

    var template = $('#myTemplate').html();

    var html = Mustache.render(template, data);

    $('#myBlock').html(html);
});

这是一个 jsFiddle：Mustache.js 示例

在第二个示例中，您需要 DOM 中的占位符 div 来输出模板化字符串，但您不需要包含h1orp元素，因为它们将被动态添加。

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

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

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

链接：模板沙箱

有关 Transparency.js 的更多信息：尝试透明度

..和 Mustache.js：Github 上的 Mustache.js

于 2013-03-13T00:20:23.097 回答
0

调用.text每个元素以将其设置为您的模型值。

于 2013-03-11T17:22:08.100 回答