Spacebars for HTML ‘disabled’ HTML input

Question

I'm disabling textareas using the disabled HTML property.

<textarea disabled>{{foo}}</textarea>

Simple enough. That enables it so that the client cannot enter the textarea and make changes. However, I want to make that disabled based on a conditional.

Let's say allowed is a Boolean. I want to just be able to do the following.

<textarea {{#unless allowed}} disabled  {{/unless}}>{{foo}}</textarea>

But this causes errors in the template. In VS Code the {{#unless allowed}}disabled{{ turns blue and the /unless}} turns red.

Any idea on how to do this? Thanks!

Answer 1

This is where you need to use a so-called attribute helper.

<textarea {{attributes}}>{{foo}}</textarea>

Template.foo.helpers({
  attributes() {
    return {
      disabled: allowed,
    };
  }
});