Question

我有以下聚合物元素

<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的元素

根据您的情况，您应该可以使用this。$。checkbox或this。$ ['checkbox']

访问#checkbox

我建议您使用Poylmer方式代替DOM操作。

创建一个新属性，例如isChecked

isChecked : {
    type : Boolean,
    value: false
}

您的输入：

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

您的处理程序：

（更新-使用@mishu提及的this.set（）是一种好习惯，它会强制UI更新更改）

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

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

1 个答案: