我有以下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">*</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)
在这种情况下它无法找到元素而我收到错误。我究竟做错了什么?如何检查复选框的选中状态?
在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);
}