javascript - 切换纸张按钮的禁用属性

Question

我有一个与多个paper-input字段/元素相关的paper-button(发送按钮)。 只要用户填写了所有相关的 paper-input 字段/元素(newEmail 和 密码)。

这是元素的重要部分

  <gold-email-input id="newEmail"
                    label="Email"
                    no-label-float required>
  </gold-email-input>

  <paper-input id="passwd"
               type="password"
               label="Password"
               no-label-float required>
  </paper-input>

  <div class="buttons">
    <paper-button dialog-dismiss>Cancel</paper-button>
    <paper-button dialog-confirm autofocus
                  disabled$="[[isInputEmpty($$.newEmail.value, $$.passwd.value)]]"
                  on-tap="changeEmail"
                  class="default">Save</paper-button>
  </div>

当 newEmail.value 或 passdw 时，不会调用函数 disabled$="[[isInputEmpty($$.newEmail.value, $$.passwd.value)]]"。值变化。

这是 JavaScript 部分:

  isInputEmpty (email, pass) {
    if (email.length === 0 || pass.length === 0) return true;
    return false;
  }

在true和false之间切换属性disabled的正确实现是什么？

Answer 1

1. disabled实际上是一个property of <paper-button> (不是属性)，因此您不应该使用 attribute-binding syntax (即 $= )。

   <!-- don't do this -->
   <!--
   <paper-button disabled$="[[isInputEmpty(...)]]">
   -->
   
   <paper-button disabled="[[isInputEmpty(...)]]">
   

2. 您正在尝试传递 newEmail 的值和passwd在您的绑定(bind)中，但您没有使用正确的语法。您必须将这些输入中的值绑定(bind)到您将在计算绑定(bind)中作为参数传递的属性:

   <gold-email-input value="{{email}}"></gold-email-input>
   <paper-input value="{{password}}"></paper-input>
   <paper-button disabled="[[isInputEmpty(email, password)]]"></paper-button>