使用 Meteor 设置文档标题答案

【问题标题】：Setting the document title with Meteor使用 Meteor 设置文档标题
【发布时间】：2015-11-14 08:44:17
【问题描述】：

我刚从 Meteor 开始。在要本地化的应用程序中，我想设置文档标题。

在我的准系统版本中，我只有 2 个文档：

head.html

<head>
  <meta charset="utf-8">
  <title>{{localizedTitle}}</title>
</head>

ui.js

UI.registerHelper("localizedTitle", function() {
  var title = "Localized Title"
  document.title = title;
});

应用加载时，文档标题为“{{localizedTitle}}”。如果我从控制台调用UI._globalHelpers.localizedTitle()，则会显示正确的标题。

我必须做什么才能在页面加载时显示本地化标题？

编辑：这对我有用，但它似乎有点 hack。 title 模板除了渲染自身之外什么都不做，这实际上不会给界面添加任何内容。

body.html

<body>
{{> title}}
</body>

<template name="title">
</template>

title.js

Template.title.onRendered(function () {
  document.title = getLocalizedString()

  function getLocalizedString() {
    return "Title : in English"
  }
})

【问题讨论】：

标签： meteor title spacebars

【解决方案1】：

按照 Bernát 的回答，您的全局助手不应在头部的 <title> 标记中调用，而应在您希望具有给定标题的模板的 <template> 标记中调用。在 Meteor 中，<head> 不算作模板，因此您不能在其中使用空格符号：它只会被视为简单文本。

另外，请记住，您的助手不会向页面返回（即打印）任何内容。 document.title = "something" 直接将“某物”分配给您的 ` 标签。所以不需要在里面调用你的助手！

因此，假设您希望使用localized 模板为页面设置“本地化标题”标题：

<template name="localized">
  <h1>This is the localized page</h1>
  {{localizedTitle}}
</template>

在这里，你的把戏应该奏效了。

【讨论】：

【解决方案2】：

我发现在 Iron-router 路由中的 onAfterAction 中设置标题很方便：

onAfterAction: function(){
  document.title = 'foo'; // ex: your site's name
  var routeName = Router.current().route.getName();
  if ( routeName ) document.title = document.title + ': ' + routeName;
}

【讨论】：

我还没开始看iron:router。一次一件事。
你最终会到达那里，或者到 flow-router ;)
无论如何，@BraveKenny 是对的，设置文档标题的唯一方法是从 javascript。您唯一的问题是如何触发该 js 运行。你模板的 onRendered 回调、iron-router 等……都是有效的选择。

【解决方案3】：

我认为更优雅的解决方案是让标题反应并通过 Session 变量设置它（其他反应数据源当然也可以）。像这样：

Template.body.onRendered(function() {
  this.autorun(function() {
    document.title = Session.get('documentTitle');
  });
});

现在每次设置“documentTitle”变量时都使用

Session.set('documentTitle', 'Awesome title');

页面标题将会改变。无需 hack，您可以在客户端代码中的任何位置执行此操作。

【讨论】：

【解决方案4】：

试试这个：

UI.registerHelper('title', function() {
 return 'LocalizedTitle'
});

我们可以在任何你想要的地方使用标题

你可以像这样使用{{title}}

【讨论】：