使用Polymer.dom（this.root）.querySelector在Polymer元素中找不到checkbox元素

Question

我有以下Polymer元素

<dom-module id="bps-boolean-field">
  <template>
    <style>

    </style>

    <div class="boolean-field-body">

      <div class="boolean-label" id="booleanLabel">[[_convertCamelCaseToRegular(label)]]</div><div id="mandatoryMark" class="mandatory">&#42;</div>
      <label class="switch">
        <input id="checkbox" type="checkbox" onclick="[[_updateReturnValue]]">
        <span class="slider round"></span>
      </label>
    </div>

  </template>
  <script>
    class BpsBooleanField extends Polymer.Element {
      static get is() { return 'bps-boolean-field'; }

      static get properties() {
        return {
          label : {
            type : String
          },
          description : {
            type : String
          },
          defaultValue : {
            type : Boolean
          },
          returnValue : {
            type : String
          },
          mandatory : {
            type : Boolean
          }
        }
      }

      _updateReturnValue(evt){
        //var toggleSwitch = Polymer.dom(this.root).querySelector("#checkbox");
        console.log(evt);
        //var toggleSwitch = document.getElementById('checkbox');
        if(Polymer.dom(this.root).querySelector("#checkbox").checked === true){
          this.returnValue = "true";
        } else if (Polymer.dom(this.root).querySelector("#checkbox").checked === false) {
          this.returnValue = "false";
        }
        console.log("Switch toggled, return value is:"+this.returnValue);
      }

      connectedCallback(){
        super.connectedCallback();
        //console.log("Check for mandatory:"+this.mandatory);

        if(this.mandatory === true){
          Polymer.dom(this.root).querySelector("#mandatoryMark").style.display = 'block';
        } else {
          Polymer.dom(this.root).querySelector("#mandatoryMark").style.display = 'none';
          Polymer.dom(this.root).querySelector("#booleanLabel").style.float = 'none';
        }

        if(this.defaultValue !== ""){
            //console.log("Set default value of boolean field to:"+this.defaultValue);
            if(this.defaultValue === false){
              Polymer.dom(this.root).querySelector("#checkbox").checked = false;
            } else if (this.defaultValue === true) {
              Polymer.dom(this.root).querySelector("#checkbox").checked = true;
            }
        } else {
          Polymer.dom(this.root).querySelector("#checkbox").checked = false;
        }
      }
    }


    customElements.define(BpsBooleanField.is, BpsBooleanField);
  </script>
</dom-module>

在connectedCallback（）中，一旦我的聚合物元素加载，它就会预设是否应该选中复选框。我测试了这个并且它运行成功。

现在，我试图在单击复选框时更新returnValue的属性。但是，当我尝试检查复选框的选中状态时，出现错误：

Uncaught TypeError: Cannot read property 'checked' of null
    at HTMLInputElement._updateReturnValue (bps-boolean-field-latebinding.html:136)

在这种情况下它无法找到元素而我收到错误。我究竟做错了什么？如何检查复选框的选中状态？

Answer 1

在Polymer中，您可以使用$访问具有ID的元素

在您的情况下，您应该可以使用此。$。复选框或此访问#checkbox。$ ['复选框']

我建议你使用Poylmer方式而不是DOM操作。

创建一个新属性，例如isChecked

isChecked : {
    type : Boolean,
    value: false
}

你的意见：

<input type="checkbox" id="checkbox" checked="{{isChecked}}" onclick="_handleCheck">

你的经纪人：

（更新 - 使用this.set（）作为@mishu提到的是好习惯，它强制UI更新更改）

_handleCheck() {
    this.set('isChecked', !this.isChecked);
}