Question

我最近开始学习Dart和Polymer，发现了一个问题。我在Polymer中编写了一个my-loginarea元素，其中包含两个Polymer元素username-input和password-input。两者都有一个Dart脚本，它有一个检查输入是否为空的方法。

  String verifyPassword() {
    if(password == null || password.isEmpty) {
      errorMsg = "Password empty";
    }
    return errorMsg;
  }

如果按下登录按钮，则调用verifyLogin()元素的方法my-loginarea以验证输入。我希望这种方法可以在verifyPassword和username-input上调用password-input方法，但我不知道如何调用这些方法，或者至少知道如何在这些元素的实例。

以下是LoginArea.html的代码：

<polymer-element name="my-loginarea"> 
<template>    
<template if="{{!userLoggedIn}}">
<div align="center">
  <table>
    <tr>Username:
      <login-usernameinput></login-usernameinput>
    </tr>
    <tr>Password:
      <login-passwordinput></login-passwordinput>
    </tr>
    <tr>
      <button on-click="{{verifyLogin}}">Login</button>
    </tr>

    <span id="error" hidden?="{{errorMsgs.isEmpty}}">
      <template repeat="{{err in errorMsgs}}">
      <p>{{err}}</p>
    </span>
  </table>
</div>

</template> 

<template if="{{userLoggedIn}}">
  <div align="center">
    <p>Successfully logged in!</p>
    <button on-click="{{userLogout}}">Logout</button>
  </div>
</template> 

<script  type="application/dart" src="loginBehaviour.dart"></script>
</polymer-element>

Answer 1

我建议您为id和<login-usernameinput id="username">

添加<login-passwordinput id="password">属性

在verifyLogin()方法中，您可以调用verifyPassword()

void verifyLogin(MouseEvent e) {
  if($["username"].verifyPassword()) {
    print('username is fine');
  } else {
    print('username is missing/invalid');
  }

  if($["password"].verifyPassword()) {
    print('password is fine');
  } else {
    print('password is missing/invalid');
  }
}

不添加id属性，您可以将其称为

void verifyLogin(MouseEvent e) {
  if(shadowRoot.querySelector("login-usernameinput").verifyPassword()) {
    print('username is fine');
  } else {
    print('username is missing/invalid');
  }

  if(shadowRoot.querySelector("login-passwordinput").verifyPassword()) {
    print('password is fine');
  } else {
    print('password is missing/invalid');
  }
}

如果没有shadowRoot，可能会调用文档的querySelector，而这将无法在其他Polymer元素中找到元素。 shadowRoot.querySelector在当前的Polymer元素中搜索。

您还可以使用document.querySelector('* /deep/ login-usernameinput')（或只是querySelector('* /deep/ login-usernameinput')）在所有Polymer元素shadow DOM中进行querySelector搜索，但不建议这样做，因为它打破了封装，当然因为它更慢必须搜索整个页面。但有些情况下这可能会派上用场。

如何在shadow DOM中调用Dart Polymer元素的方法？

1 个答案: