如何在不使用帮助器的情况下访问 Meteor 模板中的全局变量？答案

【问题标题】：How to access global variables in Meteor template without using a helper?如何在不使用帮助器的情况下访问 Meteor 模板中的全局变量？
【发布时间】：2015-07-02 14:25:58
【问题描述】：

我的所有图像文件都来自不同的域，我将该主机名作为变量放入 Meteor.settings。那么，如何在 Meteor 模板中访问这个变量呢？

例如，在这个模板中，用 Meteor.settings 中定义的变量或其他一些全局变量替换 img.example.com 的最佳做法是什么？我认为使用帮助器将其传递给每个模板并不是一个好主意。

<template name="products">
  {{#each items}}
    <img src="http://img.example.com/{{id}}.png">
  {{/each}}
</template>

【问题讨论】：

标签： javascript meteor spacebars

【解决方案1】：

Template.registerHelper('var', name => {
  const data = Template.instance().data || {};
  return data[name];
});

内模板：

{{var 'someVariableFromTemplate'}}

【讨论】：

虽然这可能会回答这个问题，但最好解释一下答案的基本部分，以及 OP 代码可能存在什么问题。

【解决方案2】：

我知道这不是 op 所要求的，但是当搜索“如何从模板访问 Meteor 设置”时，这个页面出现在 Google 上。

我扩展了@Tomas Hromnik 的灵魂并制作了这个全局模板助手：

helpers.js

Template.registerHelper('meteorSettings', function(settings) {
  var setting = Meteor.settings.public;
  if (settings) {
    var eachSetting = settings.split('.');
    for (i = 0; i < eachSetting.length; i++) {
      setting = setting[eachSetting[i]];
    }
  }
  return setting;
});

home.html

<template name="home">
  <!--
    Basically the same as doing this: (except you can't do this)
    {{#if Meteor.settings.public.instagram.access_token}}
  -->
  {{#if (meteorSettings 'instagram.access_token')}}
    <div class="instagram"></div>
  {{/if}}

  <!--
    You can also set Meteor.settings.public to a variable to access multiple settings
  -->
  {{#let settings=meteorSettings}}
    {{settings.instagram.access_token}}
  {{/let}}
</template>

【讨论】：

【解决方案3】：

为全局函数分配返回类型

if(Meteor.isClient){
 getItems = function(){
//do your stuffs
 return items;
}

你的模板

<template name="products">
    {{#each items}}
    <img src="http://{{imgExampleUrl}}/{{id}}.png">
  {{/each}}
</template>

帮手

Template.products.helpers({
  items : function(){
    return getItems();
  }
});

您可以在任何地方使用getItems()

【讨论】：

【解决方案4】：

将数据传递到模板的唯一方法是通过帮助程序。你可以使用global helper:

Template.registerHelper('imgExampleUrl', function() {
   return 'img.example.com';
});

然后你可以在很多模板中使用全局助手：

<template name="products">
  {{#each items}}
    <img src="http://{{imgExampleUrl}}/{{id}}.png">
  {{/each}}
</template>

<template name="otherTemplate">
    <img src="http://{{imgExampleUrl}}/{{id}}.png">
</template>

或者如果你想从 settings.json 中获取 imgExampleUrl 的值

Template.registerHelper('imgExampleUrl', function() {
   return Meteor.settings.public.imgExampleUrl;
});

你的 settings.json：

{
  "public": {
    "imgExampleUrl": "img.example.com"
  }
}

【讨论】：

如果没有像问题所问的那样的助手，你是怎么做的？ ...例如，我不想用变量污染我的全局助手
将数据传递到模板的唯一方法是通过帮助程序。

【解决方案5】：

在你的 Js 文件中这样做。可能对你有帮助

Template.yourTemplateName.varNameYouhavetoaccess= function(){
    return getYourGlobalValueHere;
  }

并且在模板中的 HTML 页面中，您可以迭代值 {{varNameYouhavetoaccess}}

或者你可以使用Helper

在JS文件中：

模板.nametag.helpers({ 名称：“本·比特德尔” });

在 HTML 中：

<template name="nametag">
  <p>My name is {{name}}.</p>
</template>

【讨论】：

但是，这是否意味着我必须为将使用此变量的每个模板定义一个包装器或帮助器？这就是我要避免的。