如何在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元素的方法？

回答

相關問題