如何在 Dart 中使用数据绑定禁用按钮？答案

【问题标题】：How do I disable a button using data bindings in Dart?如何在 Dart 中使用数据绑定禁用按钮？
【发布时间】：2014-05-23 02:07:50
【问题描述】：

在回复一年多前的 similar question 时，我读到了一种使用 Dart（和聚合物飞镖）中的数据绑定来禁用按钮的简单方法。

我当前的代码如下所示：

html:

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

.dart：

...
@published int points = 0;

void increment() {
  points++;
}

void decrement() {
  points--;
}
...

然而，Dart 似乎不再对禁用元素“聪明”了。

如何使用最新的 Dart 和 Polymer 来禁用使用数据绑定的按钮（或者如果不能以编程方式）？

【问题讨论】：

【解决方案1】：

绑定到 disabled 属性可以这样完成：

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

? 是 Polymer 引入的特殊语法，用于支持绑定到这种布尔属性。

这不起作用：

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

因为它会导致

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

这仍然会禁用按钮。

对于 Polymer >= 1.0，要使用的新语法是：

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

注意：value 必须是布尔值，正如 Marco 在下面指出的那样。否则，您必须创建一个返回 points == 0 的函数。请参阅此处的Data Binding Documentation 和此处的Migration Guide 以供参考。

问候，罗伯特

【讨论】：

【解决方案2】：

对于polymer 1.0，我找到了答案here。

应该是：<button ... disabled$="{{myTestFunction()}}">Content</button>

仅供参考：我不能够使用像points == 0 这样的简单语句，但我不得不使用返回boolean 的函数。

【讨论】：