Question

我正在使用模板在Meteor中生成HTML标记属性，但似乎已被打破。我无法在meteor的HTML标记中放置模板，我想知道原因。

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

/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();
};

但是这不起作用，我从应用程序得到一个错误，说不支持身体上的属性。将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。浏览器显示'＆gt;'在页面之前，控制台元素面板如下所示： Console screenshots

为什么不起作用？

Answer 1

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

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

var _domFrag = Template.myTemplateName();

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

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

Answer 2

我不知道为什么meteor不允许最高级别的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。这完美地解决了我的问题，但我仍然想知道为什么第一个选项（在我的问题中）最初没有用。

如何使用模板在流星中生成动态HTML标记属性？

2 个答案: