For example I have an object like this:
{ '#SKU_NBR': '123' }
And I want to print out the value but the simple syntax for this doesn't work:
<div>{{#SKU_NBR}}<div>
How can I escape the name of the field such that I can use it in a template expression in handlebars?
For example I have an object like this:
{ '#SKU_NBR': '123' }
And I want to print out the value but the simple syntax for this doesn't work:
<div>{{#SKU_NBR}}<div>
How can I escape the name of the field such that I can use it in a template expression in handlebars?
Share Improve this question asked Jun 12, 2018 at 20:24 justin.m.chasejustin.m.chase 13.7k8 gold badges60 silver badges109 bronze badges 7-
What have you tried? Does
<div>{{#SKU_NBR}}<div>
work? – Bohemian ♦ Commented Jun 12, 2018 at 20:54 -
I tried
{{#SKU_NBR}}
(obviously),{{\#SKU_NBR}}
and{{##SKU_NBR}}
Your suggestion is giving meParse error on line 1: {{#SKU_NBR}} ---^ Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'INVALID'"
I do have a work around but I want to see if anyone has a better answer before posting it here. – justin.m.chase Commented Jun 12, 2018 at 21:58 -
Why not just drop the
#
in the object key? It would seem easier to me to stick with{ SKU_NBR: '123 }
. – mccambridge Commented Jun 12, 2018 at 22:27 - @mccambridge Its ing out of a 3rd party CSV file and the library I'm using is just using the column names verbatim. Every row emitted from the file has this key name and I'm generically applying these templates to fields. I may end up just stripping it out but that could be annoying as they will not match the actual column names the. But I'd rather know how to escape them if its possible, if not then I will probably figure something like that out. I did manage to figure out how to do it with helpers. – justin.m.chase Commented Jun 12, 2018 at 22:35
-
2
So many possibilities.
{{ "#SKU_NBR" }}
or{{ '#SKU_NBR' }}
or{{ [#SKU_NBR] }}
. Just choose one.#
is syntax prefix for handlebars's block expression. Btw its already answered on SO. – bigless Commented Jun 13, 2018 at 1:01
3 Answers
Reset to default 4To elaborate on the answer from bigless, you can use any of these:
{{ "#SKU_NBR" }}
{{ '#SKU_NBR' }}
{{ [#SKU_NBR] }}
These resolve the variable named within the escape characters (as opposed to just including the String #SKU_NBR
).
I had a similar problem because I had variables named this
and with
. I found {{[this]}}
worked as expected, but {{[with]}}
did not. I was able to work around this by using {{this.with}}
You can use {{[@special-chars]}}
.
Example: {{[#sku_no]}}
Refer to working example in handlebar tryit editor: https://handlebarsjs./playground.html#format=1¤tExample=%7B%22template%22%3A%22%7B%7B%5B%23SKU_NBR%5D%7D%7D%22%2C%22partials%22%3A%5B%5D%2C%22input%22%3A%22%7B%5Cn%20%20%5C%22%23SKU_NBR%5C%22%3A%20123456%5Cn%7D%5Cn%22%2C%22output%22%3A%22123456%22%2C%22preparationScript%22%3A%22%5Cn%22%2C%22handlebarsVersion%22%3A%224.7.8%22%7D
One way to solve this is to use a helper function. I made one called get
which just gets a field based on a string.
import Handlebars from 'handlebars'
import get from 'lodash/get'
Handlebars.registerHelper('get', function (path, opts) {
return get(opts, `data.root.${path}`)
})
const template = Handlebars.pile('{{get "#upc"}}');
const result = template({ '#upc': 'abc123' })
console.log(result) // abc123
You can use it in sub-expressions also like so:
{{tolowercase (get "#upc")}}