AshleyGrant/app.html

## app.html
<template>
  <require from="./auth"></require>

  <button click.delegate="authorized = !authorized">Toggle Authorized</button>
  <button click.delegate="isDisabled = !isDisabled">Toggle Disabled</button> <br /><br />

  Has disabled binding: <input type="text" auth.bind="authorized" disabled.bind="isDisabled" value.bind="value" /> <br /><br />

  No disabled binding: <input type="text" auth.bind="authorized" value.bind="value" />

  <ul>
    <li>
      authorized = ${authorized}
    </li>
    <li>
      isDisabled = ${isDisabled}
    </li>
    <li>
      value = ${value}
    </li>
  </ul>
</template>

## app.js
export class App {
  authorized = true;
  isDisabled = true;
  value = 'Ashley';
}

## auth.js
import {inject} from 'aurelia-framework';
import {Parser} from 'aurelia-binding';


@inject(Element, Parser)
export class AuthCustomAttribute {
  constructor(element, parser) {
    this.el = element;
    this.parser = parser;
  }

  created(owningView) {
    this.disabledBinding = owningView.bindings.find( b => b.target === this.el && b.targetProperty === 'disabled');

    if( this.disabledBinding ) {
      this.disabledBinding.originalSourceExpression =  this.disabledBinding.sourceExpression;

      // this expression will always evaluate to true
      this.expression = this.parser.parse('true');
    }
  }

  bind() {
    // for some reason if I don't do this, then valueChanged is getting called before created
    this.valueChanged();
  }

  unbind() {
    if(this.disabledBinding) {
      this.disabledBinding.sourceExpression =  this.disabledBinding.originalSourceExpression;
      this.disabledBinding.originalSourceExpression = null;

      this.rebind();

      this.disabledBinding = null;
    }
  }

  valueChanged() {
    if(this.disabledBinding ) {
      if( this.value === true ) {
        this.disabledBinding.sourceExpression =  this.disabledBinding.originalSourceExpression;
      } else {
        this.disabledBinding.sourceExpression = this.expression;
      }

      this.rebind();

    } else {
      if( this.value === true ) {
        this.el.removeAttribute('disabled');
      } else {
        this.el.setAttribute('disabled', 'disabled');
      }
    }
  }

  rebind() {
    const source = this.disabledBinding.source;
    this.disabledBinding.unbind();
    this.disabledBinding.bind(source);
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>
	<template>
	<require from="./auth"></require>

	<button click.delegate="authorized = !authorized">Toggle Authorized</button>
	<button click.delegate="isDisabled = !isDisabled">Toggle Disabled</button> <br /><br />

	Has disabled binding: <input type="text" auth.bind="authorized" disabled.bind="isDisabled" value.bind="value" /> <br /><br />

	No disabled binding: <input type="text" auth.bind="authorized" value.bind="value" />

	<ul>
	<li>
	authorized = ${authorized}
	</li>
	<li>
	isDisabled = ${isDisabled}
	</li>
	<li>
	value = ${value}
	</li>
	</ul>
	</template>
	export class App {
	authorized = true;
	isDisabled = true;
	value = 'Ashley';
	}
	import {inject} from 'aurelia-framework';
	import {Parser} from 'aurelia-binding';


	@inject(Element, Parser)
	export class AuthCustomAttribute {
	constructor(element, parser) {
	this.el = element;
	this.parser = parser;
	}

	created(owningView) {
	this.disabledBinding = owningView.bindings.find( b => b.target === this.el && b.targetProperty === 'disabled');

	if( this.disabledBinding ) {
	this.disabledBinding.originalSourceExpression = this.disabledBinding.sourceExpression;

	// this expression will always evaluate to true
	this.expression = this.parser.parse('true');
	}
	}

	bind() {
	// for some reason if I don't do this, then valueChanged is getting called before created
	this.valueChanged();
	}

	unbind() {
	if(this.disabledBinding) {
	this.disabledBinding.sourceExpression = this.disabledBinding.originalSourceExpression;
	this.disabledBinding.originalSourceExpression = null;

	this.rebind();

	this.disabledBinding = null;
	}
	}

	valueChanged() {
	if(this.disabledBinding ) {
	if( this.value === true ) {
	this.disabledBinding.sourceExpression = this.disabledBinding.originalSourceExpression;
	} else {
	this.disabledBinding.sourceExpression = this.expression;
	}

	this.rebind();

	} else {
	if( this.value === true ) {
	this.el.removeAttribute('disabled');
	} else {
	this.el.setAttribute('disabled', 'disabled');
	}
	}
	}

	rebind() {
	const source = this.disabledBinding.source;
	this.disabledBinding.unbind();
	this.disabledBinding.bind(source);
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>