How to disable a button using data bindings in Dart?

Question

In response to a similar question , that is, over a year, I read about a simple way to disable a button using data binding in Dart (and polymer dart).

My current code is as follows:

HTML:

... <button id="btnPointDown" on-click="{{decrement}}" disabled="{{points == 0}}">\/</button> ... 

.dart:

 ... @published int points = 0; void increment() { points++; } void decrement() { points--; } ... 

However, Dart no longer seems “smart” about a disabled item.

How to use modern Dart and Polymer to disable a button using data bindings (or, if this is not possible programmatically)?

Answer 1

Binding to a disabled attribute can be performed as follows:

 <button ... disabled?="{{ points == 0 }}">Content</button> 

This one ? is a special syntax introduced by Polymer to support binding to these types of logical attributes.

This does not work:

 <button ... disabled="{{ points == 0 }}">Content</button> 

Because it will lead to

 <button ... disabled="false">Content</button> 

which still disables the button.

For Polymer> = 1.0, the new syntax is:

 <button ... disabled$="{{value}}">Content</button> 

Note: value should already be logical, as Marco pointed out below. Otherwise, you need to create a function that will 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 did not have the opportunity to use simple operators like points == 0 , but instead I had to use a function that returns boolean .