Question

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

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

reading_datetime = datetime.datetime(2015, 9, 22, 21, 22, 12)

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

results.query

我可能在这里缺少一些直截了当的东西？我也尝试在<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属性。有什么建议？也许是另一种方法？

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输入有效性观察者

1 个答案: