Polymer JS 輸入值可以設置但不會在 UI 中呈現

Question

我有兩個名為LegalName和OperatingName的字段（字段 1 和字段 2）。 當一個值被添加到 id=" eventlistener " 時，應該添加一個事件監聽器，所以當我們focusout和 tab 到字段 2 時， id="operatingName"的字段 2 的值默認為 LegalName 的值。 現在這是在 Polymer 中，其中常規 JavaScript 事件偵聽器將看不到/識別 ID。 然而，這就是我得到的，到目前為止，該值正在設置中，但是當我們聚焦時，它不會被渲染。 任何幫助將不勝感激。

 _defaultToCompanyLegalName() {
                var el = this.$.legalName;
                if (el) {
                    this.$.commercial.addEventListener('focusout', function () {
                        this.$.operatingName.value = this.$.legalName.value;
                    })
                }
            }

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>

Answer 1

Eventlistener 被添加到 div "#contract" 上，但理想情況下它應該在輸入字段 "#legalName" 上。 我通過將 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>