在meteor中如何使用模板生成动态HTML标签属性？答案

【问题标题】：How do you use templates to generate dynamic HTML tag attributes in meteor?在meteor中如何使用模板生成动态HTML标签属性？
【发布时间】：2012-12-13 21:54:43
【问题描述】：

我正在使用模板在 Meteor 中生成 HTML 标记属性，但似乎已损坏。我不能将模板放在meteor 的 HTML 标记内，我想知道原因。

我正在使用meteor-router 进行路由。由于流星基本上只允许单一布局，我想在 body 中添加一个类来指示当前视图名称，如下所示：

/client/layout.html:

<head>
  <title>Meteor App</title>
</head>

<body {{> body-attributes}}>
  {{renderPage}}
</body>

<template name="body-attributes">data-view-name="{{page}}" class="{{page}}"<template>

这样我就可以在 /client/layout.js 中执行此操作：

Template['body-attributes'].page = function () {
  return Meteor.Router.page();
};

但这不起作用，我从应用程序中收到一条错误消息，说不支持 body 上的属性。将 layout.html 更改为此：

<head>
  <title>Meteor App</title>
</head>

<body>
  <div {{> body-attributes}}>
      {{renderPage}}
  </div>
</body>

<template name="body-attributes">data-view-name="{{page}}" class="layout-container {{page}}"<template>

导致 HTML 完全损坏。浏览器在页面前显示一个“>”，控制台元素面板如下所示：

为什么这不起作用？

【问题讨论】：

标签： javascript meteor html

【解决方案1】：

我不知道为什么流星不允许最高级别的 HTML 标记内的模板，但我找到了解决这个问题的方法。我将 layout.html 更改为如下所示：

<head>
  <title>Meteor App</title>
</head>
<body>
  {{> global-layout}}
</body>

<template name="global-layout">
  <div data-view-name="{{page}}" class="global-container {{page}}">
    {{renderPage}}
  </div>
</template>

然后在 layout.js 中将名称从 body-attributes 切换为 global-layout。这完美地解决了我的问题，但我仍然很想知道为什么第一个选项（在我的问题中）最初不起作用。

【讨论】：

模板中的<body> 标记不是实际的 HTML 正文标记 - 它不引用同一个元素。这就是为什么它不起作用。这有点不直观，但一旦你明白它们是两个不同的东西，它就会更有意义。
head 标签是这样吗？如果是这样，如何制作动态页面标题？
只需使用 Javascript 设置 document.title。它与您习惯的有点不同，但是从 Javascript 而非 HTML 中思考。

【解决方案2】：

在 HTML 标记内调用 {{> body-attributes}}（在您的情况下为 body 标记）最终意味着 Meteor 将在该位置将 DocumentFragment 注入到 DOM 中。

为了反应性，这些DocumentFragments 不是模板中标记的普通复制品，而是包裹在特殊的 Meteoresque 反应性标签中，帮助后端引擎保持 Template 更新。您可以通过调用 Template 函数并调查 _domFrag 的样子来看到这一点：

var _domFrag = Template.myTemplateName();

因此，流星上下文中的Templates 并非旨在作为属性嵌入到 HTML 标签中，因为它会在标签本身中注入额外的标签。您的第二次尝试更符合框架的工作方式。

希望这有助于解释这种行为。

【讨论】：

谢谢，我将你的答案标记为答案，并会说人们应该查看my answer 以解决此问题。