Bind "true" or "false" attribute to boolean value


#1

What is the best way to bind a boolean to an HTML attribute which required the value ‘true’ or ‘false’ (e.g., many aria- attributes). As shown in the guide, binding an attribute to a boolean usually just adds or removes the attribute (e.g. disabled for form elements).

My current solution is a set of Em.computed functions, as below, but I wonder if there is a better way?

function ternaryValue (dependentKey, trueValue, falseValue) {
  return Em.computed(dependentKey, function () {
    return Em.get(this, dependentKey) ? trueValue : falseValue;
  });
}

function truthString (dependentKey) {
  return ternaryValue(dependentKey, 'true', 'false');
}

function invertedTruthString (dependentKey) {
  return ternaryValue(dependentKey, 'false', 'true');
}

#2

I should note that I am trying to bind this attribute in the view class itself, not in a template. There, I know, I can use {{bindAttr attribute=‘property:truthValue:falseValue’}} e.g., {{bindAttr aria-hidden=‘isVisible:false:true’}}

But is there a similar shorthand in code?