[英]Polymer JS input value can be set however not being rendered in the UI
I have two fields called LegalName
and OperatingName
(field 1 and field 2).我有两个名为LegalName
和OperatingName
的字段(字段 1 和字段 2)。 When a value is being added to id="legalName" an eventlistener
should be added so when we focusout
and tab to field 2 the value of field 2 with id="operatingName"
defaults to value of LegalName.当一个值被添加到 id=" eventlistener
" 时,应该添加一个事件监听器,所以当我们focusout
和 tab 到字段 2 时, id="operatingName"
的字段 2 的值默认为 LegalName 的值。 Now this is in Polymer where regular JavaScript event listener won't see/recognizes the ids.现在这是在 Polymer 中,其中常规 JavaScript 事件侦听器将看不到/识别 ID。 this is what i got however, so far the value is being set but when we focusout it won't get rendered.然而,这就是我得到的,到目前为止,该值正在设置中,但是当我们聚焦时,它不会被渲染。 any help would be greatly appreciated.任何帮助将不胜感激。
_defaultToCompanyLegalName() {
var el = this.$.legalName;
if (el) {
this.$.commercial.addEventListener('focusout', function () {
this.$.operatingName.value = this.$.legalName.value;
})
}
}
id="commercial" is the id of the parent DIV. id="commercial" 是父 DIV 的 id。
<div class="row" id="commercial">
<div class="column mandatory">
<div style="padding-right: 10px;">
<label for="companyLegalName">Company Legal Name</label>
<input id="legalName" type="text" value="{{_contract.companyLegalName::input}}" placeholder="Company Legal Name" />
</div>
</div>
<div class="column">
<div style="padding-right: 10px;">
<label for="companyOperatingName">Company Operating Name</label>
<input id="operatingName" type="text" value="{{_contract.companyOperatingName::input}}" placeholder="Company Operating Name" />
</div>
</div>
</div>
Eventlistener is added on the div "#contract " though it should ideally be on the input field "#legalName". Eventlistener 被添加到 div "#contract" 上,但理想情况下它应该在输入字段 "#legalName" 上。 I succeeded in solving this issue by adding a on-focusout event to "#legalname" input and setting the value of the property "_contract" which will set the input field "#operatingName" value as it already has two way binding to it.我通过将 on-focusout 事件添加到“#legalname”输入并设置属性“_contract”的值成功解决了这个问题,这将设置输入字段“#operatingName”的值,因为它已经有两种方式绑定到它。
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="test-main">
<template>
<style>
:host {
display: block;
}
</style>
<h2>Hello [[prop1]]!</h2>
<div class="row" id="commercial">
<div class="column mandatory">
<div style="padding-right: 10px;">
<label for="companyLegalName">Company Legal Name</label>
<input id="legalName" type="text" on-focusout="_defaultToCompanyLegalName" value="{{_contract.companyLegalName::input}}" placeholder="Company Legal Name" />
</div>
</div>
<div class="column">
<div style="padding-right: 10px;">
<label for="companyOperatingName">Company Operating Name</label>
<input id="operatingName" type="text" value="{{_contract.companyOperatingName::input}}" placeholder="Company Operating Name" />
</div>
</div>
</div>
</template>
<script>
/**
* @customElement
* @polymer
*/
class TestMain extends Polymer.Element {
static get is() { return 'test-main'; }
static get properties() {
return {
prop1: {
type: String,
value: 'test-main'
},
_contract: {
type: Object,
value: {},
notify: true
},
};
}
_defaultToCompanyLegalName(e) {
this.set("_contract.companyOperatingName", this._contract.companyLegalName);
}
connectedCallback(){
super.connectedCallback();
}
}
window.customElements.define(TestMain.is, TestMain);
</script>
</dom-module>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.