Polymer 1.0 输入有效性观察者

Posted 2023-02-24

【中文标题】Polymer 1.0 输入有效性观察者

【英文标题】：Polymer 1.0 input validity observer

【发布时间】：2015-07-27 01:09:27

【问题描述】：

我在查看聚合物 1.0 中输入有效性的更改时遇到了一些麻烦。更准确地说，应该在对绑定的“无效”属性进行任何更改时触发的观察者函数没有像我期望的那样触发。例如，当控件第一次变为无效时，该函数可能会触发，但如果再次变为有效，则不会触发观察者函数（无效不变为假？）。在我当前的示例中，我碰巧使用了 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 属性似乎没有被重置。有什么建议么？也许完全是另一种方法？

【参考方案1】：

我认为这可能是一个错误 - 我创建了一个 new issue 以寻求项目所有者对预期行为的澄清。目前，invalid 似乎被设置为从主机到子的单向绑定，但我认为不应该这样。我可以通过更改 paper-input-behavior、paper-input-container 和 gold-email-input 来让你的 sn-p 正常工作，但是在项目所有者澄清 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

【讨论】：

感谢您的帮助@zerodevx。我将监控您创建的 GitHub 问题。我认为这也是一个错误。您的解决方法在大多数情况下都可以解决问题。但是，我注意到，如果您将 required 属性添加到输入中，则在控件第一次接收焦点时，变异观察者不会适当地确定有效性。

完全没有问题——我也在我的项目中使用这个组件。我明白你在说什么 - 我将编辑我的答案以将观察者与错误消息节点本身联系起来。在这种情况下，只要组件的内置验证更新，就会反映突变。

完美！非常感谢！