Как назвать метод элемента Dart Polymer в тени DOM?

Question

Недавно я начал изучать Дарт и Полимер и нашел проблему. Я написал элемент my-loginarea в Polymer, который содержит два полимерных элемента username-input и password-input. Оба имеют сценарий Дарт, который имеет метод проверки, являются ли входы пустыми.

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 документа можно было бы назвать и это не будет искать элементы внутри других полимерных элементов. shadowRoot.querySelector выполняет поиск внутри текущего полимерного элемента.

Вы также можете использовать document.querySelector('* /deep/ login-usernameinput') (или просто querySelector('* /deep/ login-usernameinput')), чтобы сделать querySelector поиск внутри все полимерные элементы тени DOM, но это не рекомендуется, поскольку она нарушает инкапсуляцию и конечно медленнее, потому что он должен искать всю страницу. Но есть ситуации, когда это может пригодиться.