Search code examples
ember.jshandlebars.jshtmlbars

Ember.js: conditional input attribute

In Ember's input helper, how can I show/hide attributes based on a condition? For example, let's say I want to show required="required" if isEditable is true and disabled="disabled" otherwise. Currently I have something like this:

{{#if isEditable}}
    {{input value=model.name required="required"}}
{{else}}
    {{input value=model.name disabled="disabled"}}
{{/if}}

...but it would be nice if I bind the attributes somehow instead.

Solution

  • {{ input type='text' required=required disabled=disabled }} works just fine

    Working example here

    There are a whole bunch of attributes that you can bind directly and required and disabled are among the pack. See here

    Note @blackmind is correct that if you were to do this from scratch, you would need to do some work. Fortunately though, TextSupport already does the work for you... :) See here