How do I disable a button using data bindings in Dart?
dart, dart-polymer, polymer
Solution
Binding to the disabled attribute can be done like this:
<button ... disabled?="{{ points == 0 }}">Content</button>
This `?` is special syntax introduced by Polymer to support binding to this kind of boolean attributes.
This does not work:
<button ... disabled="{{ points == 0 }}">Content</button>
Because it would result in
<button ... disabled="false">Content</button>
which would still disable the button.
For Polymer >= 1.0 the new syntax to use is:
<button ... disabled$="{{value}}">Content</button>
Note: `value` already has to be a boolean as Marco pointed out below. Otherwise you have to create a function that would return `points == 0`. See Data Binding Documentation here and Migration Guide here for reference.
Regards, Robert
Problem
In a response to a similar question, that is more than a year old, I read about an easy way to disable a button using data binding in Dart (and polymer-dart). My current code looks like this: html: ``` ... <button id="btnPointDown" on-click="{{decrement}}" disabled="{{points == 0}}">\/</button> ... ``` .dart: ``` ... @published int points = 0; void increment() { points++; } void decrement() { points--; } ... ``` However Dart does not seem 'to be clever' about the disabled element anymore. How do I use up-to-date Dart and Polymer to disable a button using data bindings (or if not possible programmatically)?