Binding Static And Dynamic Classes With Htmlbars

I'm trying to bind a static class 'form-control' and a dynamic property value 'color' to the class attribute of an input helper, however, the syntax I'm using just outputs this to

Solution 1:

The double curly braces syntax invoke a helper or path in handlebars. But from within a helper you cannot use them to invoke a sub expression. Instead you have to use parenthesis to invoke a sub expression. For instance:

Wrong

{{input value={{uppercase user.name}} }}

Correct

{{input value=(uppercase user.name) }}

Because handlebars does not permit to interpolate literal values with dynamic ones. You'll need to use some custom helper to achieve what you want. Ember 1.3.2 comes with a concat helper, so you can use it like this:

{{inputclass=(concat "form-control " color) value=property.value type="text"}}

Notice the space in the end of "form-control" class, this is needed because the concat helper doesn't add any separator in the moment.

If you're using an old version, you can create a join-params helper to handle this for you:

app/helpers/join-params.js

importEmberfrom'ember';

exportfunctionjoinParams(params) {
  return params.join(' ');
}

exportdefaultEmber.HTMLBars.makeBoundHelper(joinParams);

And then use it without appending the space in the end of "form-control" class

{{inputclass=(join-params "form-control" color) value=property.value type="text"}}