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

我试图将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>

我究竟做错了什么？提前致谢.

解决方法:

一些问题：

>您的模板缺少is =“ dom = if”,因此它实际上在您的代码中不执行任何操作.
>即使应用了dom-if,if属性也会设置为选中状态,没有初始值.仅当bound属性具有一个未定义的值,并且由于从不设置checked时,才对绑定进行评估,因此您的模板不会标记任何内容(即,您不会看到“ Check”或“ Uncheck”).

properties: {
  checked: {
    type: Boolean,
    value: false  // initial value required for binding
  }
}

>您的模板文本向后看. if =“ {{{checked}}”的文本内容为“ Uncheck”,而if =“ {{！checked}}”“为” Check“.也许这些是用户说明,而不是复选框状态.
>本地输入不会为其checked属性发出更改事件,因此绑定不会更新您的checked属性.取而代之的是,您可以更新您的点击处理程序,以显式设置您的选中属性以匹配输入的选中值.

_checkBoxClicked: function(e) { this.checked = this.$.input.checked; }

>您的标签与输入没有关联,因此单击它不会更改复选框的状态.您可以使用以下标签来解决此问题：

<label for="foo">...</label>
<input id="foo">

或通过使输入成为标签的子代：

<label>
  <input>
</label>

codepen

标签：polymer,html,javascript,checkbox
来源： https://codeday.me/bug/20191026/1938811.html