How does this JavaScript syntax bit from Ember.js work?

Question

Going through the tutorial, I've encountered this:

this.render(hbs`
    {{#list-filter filter=(action 'filterByCity') as |results|}}
      <ul>
      {{#each results as |item|}}
        <li class="city">
          {{item.city}}
        </li>
      {{/each}}
      </ul>
    {{/list-filter}}
  `);

I thought backticks represented a string? What is hbs then? Is it a function that is receiving handlbars snippet as an argument?

@PraveenKumar I figured. How come the backticks don't error out though, syntax-wise? — dsp_099, Dec 31 '16 at 11:36
@PraveenKumar: Since the question you linked and its answers don't address the template literal, it's not a duplicate. But it's strongly related. — T.J. Crowder, Dec 31 '16 at 11:38

score 3 · Accepted Answer · edited May 23 '17 at 11:53

I thought backticks represented a string?

No, backticks represent a template literal, the result of which is usually a string, but isn't necessarily. You get a string when the template literal isn't tagged, but this is a tagged template literal, which is when a template literal is passed into a function (hbs in this case); the result is whatever the function returns. It doesn't look like a function call, but it is.

How does this JavaScript syntax bit from Ember.js work?

1 Answers1