How do I disable a button using data bindings in Dart?

Question

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)?

Answer 1

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

Answer 2

for polymer 1.0 I found the answer here.

It should be: <button ... disabled$="{{myTestFunction()}}">Content</button>

FYI: I have not been able to use simple statements like points == 0, but instead I had to use a function, which returns a boolean.