Polymer 1.0 输入有效性观察器

Question

我在观察 Polymer 1.0 中输入有效性的变化时遇到了一些问题。更准确地说，应该触发对绑定 'invalid' 属性的任何更改的观察者函数并没有像我期望的那样触发。例如，该函数可能会在控件第一次变为无效时触发，但如果再次变为有效，则不会触发观察者函数（无效不会变为假？）。在我当前的示例中，我碰巧使用了 Polymer 1.0 的 gold-email-input 元素，如下所示：

从我的自定义元素的本地 DOM 模板中提取：

<paper-icon-item>
      <iron-icon icon="social:person"></iron-icon>
      <gold-email-input id="userEmail" bind-value="{{userEmail}}" required auto-validate invalid="{{invalidEmail}}" error-message="Invalid email address"></gold-email-input>
</paper-icon-item>

从我的自定义元素的脚本声明中提取：

properties: {
      invalidEmail: {type: Boolean, observer: 'emailValidityChanged'}
}

emailValidityChanged: function(newVal, oldVal) {
      console.log(this.nodeName + " emailValidityChanged observer fired\n"); 
}

我可能在这里遗漏了一些直截了当的东西？我还尝试观察 userEmail 属性的变化，然后在观察者函数中检查 this.$.userEmail.invalid 的状态，但无济于事。当条目生效时，invalid 属性似乎没有被重置。有什么建议么？也许完全是另一种方法？

Answer 1

我认为这可能是一个错误 - 我创建了一个 new issue 以寻求项目所有者对预期行为的澄清。目前，invalid 似乎被设置为从宿主到子对象的单向绑定，但我认为不应该这样。我可以通过更改 paper-input-behavior、paper-input-container 和 gold-email-input 来让您的代码段正常工作，但是在项目所有者澄清 invalid 的真正用途之前，请不要这样做。

作为解决方法，请改用 MutationObservers。

<template>
    My Email: <span>{{myEmail}}</span><br>
    Validity: <span>{{validity}}</span><br>
    <gold-email-input id="foo" bind-value="{{myEmail}}" required
                      auto-validate error-message="Invalid email address">
    </gold-email-input>
</template>

<script>
    ...
      attached: function () {
        var t = this;
        var observer = new MutationObserver(function (mutations) {
          mutations.forEach(function (mutation) {
            if (mutation.target.classList.contains("is-invalid")) {
              // stuff to do when email is invalid
              t.validity = "No, email is invalid";

            } else {
              // stuff to do when email is valid
              t.validity = "Yes, email is valid";

            }
          });
        });
        var node = this.$.foo.$.container.$$(".add-on-content");
        observer.observe(node, {
          attributes: true,
          attributeFilter: ["class"]
        });
      }
    ...
</script>

~~正在工作的 Jsbin：http://jsbin.com/resokidako/edit?html,output~~

更新 1

改为观察 add-on-content 节点。

已更新 Jsbin：http://jsbin.com/wivimovufi/1/edit?html,output

Polymer 1.0 输入有效性观察器

Polymer 1.0 input validity observer

polymer

polymer-1.0

paper-elements