Question

我正在尝试将Polymer属性绑定到CheckBox的checked属性。但是，该属性的观察者永远不会被解雇，此外，该标签也从不显示任何文本。

但是，每次点击CheckBox我都能执行一个函数。

这是我的代码：

<link rel="import" href="../../components/polymer/polymer.html">

<dom-module id="check-box-example">
  <template>
    <div>
      <label>
        <template if="{{checked}}">Uncheck</template>
        <template if="{{!checked}}">Check</template>
      </label><br>
      <input type="checkbox" checked="{{checked}}" on-click="_checkBoxClicked">Check Box
    </div>
  </template>
  <script>
    Polymer({
      is: 'check-box-example',
      properties:{
        checked: {
          type: Boolean,
          observer: '_checkedChanged'
        }
      },
      _checkBoxClicked: function() {
        console.log("The Check Box was clicked.");
      },
      _checkedChanged: function(newValue, oldValue) {
        console.log("New Checkbox value: " + newValue);
      },
    });
  </script>
</dom-module>

我做错了什么？提前谢谢。

Answer 1

一些问题：

您的模板遗失is="dom=if"，因此它在您的代码中无效。
即使应用了dom-if，if属性也会设置为checked，该属性没有初始值。绑定仅在绑定属性具有非undefined值时进行评估，并且由于永远不会设置checked，因此您的模板不会标记任何内容（即，您不会请参阅＆＃34;检查＆＃34;或＆＃34;取消选中＆＃34;）。
```
properties: {
  checked: {
    type: Boolean,
    value: false  // initial value required for binding
  }
}
```
您的模板文字向后看。 if="{{checked}}"的文字内容为＆＃34;取消选中＆＃34;，而if="{{!checked}}"为＆＃34; Check＆＃34;。也许这些是用户说明而不是复选框状态。
原生input不会为其checked属性发出更改事件，因此绑定不会更新您的checked属性。相反，您可以更新点击处理程序，以明确设置checked属性以匹配input checked的值。
```
_checkBoxClicked: function(e) { this.checked = this.$.input.checked; }
```
您的label与input没有关联，因此点击它不会更改checkbox的状态。您可以使用label＆＃39; s for：
来解决这个问题
```
<label for="foo">...</label>
<input id="foo">
```
或让input成为label的孩子：
```
<label>
  <input>
</label>
```

codepen

复选框的选中属性绑定 - 聚合物

1 个答案: