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

我最近开始学习飞镖和聚合物，发现一个问题。我在聚合物中写了一个my-loginarea元素，它含有两个聚合物元素username-input和password-input。两者都有一个Dart脚本，它有一个方法来检查输入是否为空。如何在shadow DOM中调用Dart Polymer元素的方法？

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

如果按下登录按钮时，my-loginarea元件的方法verifyLogin()被调用来验证所述输入。我想要这种方法在username-input和password-input上调用verifyPassword方法，但我不知道如何调用这些方法或至少如何获得这些元素的实例的参考。

这里是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>

来源

2014-10-06 Azael

如果您可以添加更多代码，这将会很有帮助。元素如何在HTML中组织？您提到的聚合物元素是由相同（父）聚合物元素包含还是直接在您的入口页面（'index.html'）的HTML中？ – 2014-10-06 08:31:02

我刚刚编辑我的问题，并添加了一些HTML代码 – Azael 2014-10-06 08:36:56

我更新了我的答案。 – 2014-10-06 08:42:03

我建议你添加一个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可能被称为这样就不会发现里面其他聚合物元素的元素。 shadowRoot.querySelector在当前Polymer元素内搜索。

您也可以使用document.querySelector('* /deep/ login-usernameinput')（或只是querySelector('* /deep/ login-usernameinput')），使querySelector搜索中的所有元素聚合物影子DOM，但是这是气馁，因为它打破了封装当然是慢，因为它必须搜索整个页面。但有些情况下这可能会派上用场。

来源

2014-10-06 08:33:25

很好的答案。这解决了我的问题。谢谢：） – Azael 2014-10-06 08:56:24

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

回答

相关问题