将数组传递给 Handlebars 自定义助手

Question

I am trying to pass an array of data to a custom helper with express-handlebars . I can't get it to work.

I can pass in a string and I can pass in an array to an individual view, but I can't seem to pass in an array to a custom helper. Here is my code:

String Passed to Custom Helper (this works)

// app.js
const hbs = expressHandlebars.create({
  extname: 'html',
  helpers: {
    foo: function () {
      return 'FOO!'
    }
})

// views/layout/main.html
<h2>{{ foo }}</h2>

// Result --> FOO! outputed as expected

Passing an Array to an Individual view (this also works)

// controllers/pageControllers.js
exports.getIndexPage = (req, res) => {
  res.render('index', {
    testList: ['one', 'two', 'three']
  })
}

// views/index.html
{{#each testList}}
<div>{{this}}</div>
{{/each}}

// Result --> one, two, three outputted as expected

Array Passed to a Custom Helper (this does NOT work)

// app.js
const hbs = expressHandlebars.create({
  extname: 'html',
  helpers: {
    testList2: function () {
      return ['one', 'two', 'three']
    },
  }
})

// views/layout/main.html
{{#each testList2}}
  <div>{{this}}</div>
{{/each}}

// Result --> NOTHING.  No output, no error messages.

Do custom helpers not take arrays? The same code works on an individual view. The same code works for a string on a custom helper. It just does not work for an array on a custom helper.

If custom helpers do NOT accept arrays, then how can I get an array of data into my main layout file? If it does take an array, then what I am doing wrong and how to get this to work?

Thanks.

Answer 1

According to documentation#helpers , - i'm not using express-handlebars myself .

A Handlebars helper call is a simple identifier, followed by zero or more parameters (separated by a space)

This means you call it with the first identifier and what follows is to be evaluated.

The helper just takes in data and outputs a manipulated outcome to inject in the view.

Taking in data would look something like {{ foo exp1 exp2 }} which translates to {{foo(exp1,exp2)}} and the helper would look something like this.

 foo: function (exp1, exp2) {
      return `this is ${exp1} and ${exp2}`
    }

It's like invoking a regular function.

In your first example you call foo() (the helper function) which takes nothing in but outputs a string, and when activated you get the value return.

In your second example you are using express to render a variable which is loopable on a view. nothing to do with handlebars instance creating. (you are creating basicly an express res.locals.testList variable.)

In your third example you try to loop the helper function and not really invoking it. It's trying to do something like this:

for(let v of function() {}) {
 //...
}

This will give the error (probably silent in your case,) is not iterable

It's seems like you should manipulate the data array inside the helper function and then return a string or an html string (using Handlebars.Safestring as mentioned in the docs for escaping html). Then in your view just call it {{ testList2 }} which will out put a ready made HTML for the structure you were trying to do.

Hope this makes sense.

That been said, There are more advanced ways of using helpers as mentioned in docs. that maybe could fit more for whatever it is you are trying to do.