How to access global variables in Meteor template without using a helper?

Question

I have all my image files served from a different domain, and I put that host name as a variable into Meteor.settings. Then, how can I access this variable within a Meteor template?

For example, in this template, what's the best practice to replace img.example.com with a variable defined in Meteor.settings or some other global variables? I don't think it's a good idea to pass it to every template by using helpers.

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

Gaberones

Answer 1

The only way how you can pass data into your templates is via helpers. You can use global helper:

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

Then you can use global helper in many templates:

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

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

Or if you want to get value of imgExampleUrl from settings.json

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

Your settings.json:

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

Brindle

And without a helper like the question asks, how do you do it ? ... for example I don't want to polute my global helpers with variables – Agrigento

The only way how you can pass data into your templates is via helpers. – Brindle

Answer 2

In Your Js file do like this. It may help you

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

And In HTML page in your template you can iterate value {{varNameYouhavetoaccess}}

Or You can use Helper

In JS file:

Template.nametag.helpers({ name: "Ben Bitdiddle" });

In HTML:

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

Libratory

But, doesn't that mean I have to define a wrapper or helper for every template that will be using this variable? That's what I'm trying to avoid. – Gaberones

Answer 3

Assign a global function with return type

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

Your template

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

Helpers

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

You can use getItems() from anywhere

Engdahl

Answer 4

I know this isn't exactly what op was asking for but this page came up on Google when searching for "How to access Meteor settings from template".

I expanded on @Tomas Hromnik's soultion and made this global template helper:

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>

Bernhardt

Answer 5

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

Inside template:

{{var 'someVariableFromTemplate'}}

Sliest

While this may answer the question, it is better to explain the essential parts of the answer and possibly what was the problem with OPs code. – Backbreaking