简体   繁体   English

从Dart WebComponent在库中定义的调用函数

[英]Calling function defined in library from dart webcomponent

The web application has following code in app.dart 该Web应用程序在app.dart中具有以下代码

library app;
import 'dart:html';
var _loginClass; 

void main() {
 _loginClass = 'hide_login'; //set style to hide login web component by setting display:none

}
void showLogin(e) {
  _loginClass = 'show_login';
 print("span clicked");
}
void hideLogin(e) {
_loginClass = 'hide_login';
}

calling hideLogin(e) function from App.dart hides the web component. 从App.dart调用hideLogin(e)函数将隐藏Web组件。 but calling it from web component does not work. 但无法从Web组件调用它。

css is defined as follows: CSS定义如下:

.hide_login {
display: none;
}

.show_login {
 display = block;
}

It's weird that you have "display: none;" 您“显示:无;”很奇怪 and "display = block;". 和“ display = block;”。 The second is not valid syntax. 第二个无效语法。

If that's not the right answer, try adding: 如果这不是正确的答案,请尝试添加:

import 'package:web_components/web_components.dart';

And then call dispatch(); 然后调用dispatch(); after setting _loginClass. 设置_loginClass之后。

It would probably be more dartish to use 使用它可能会更胆怯

<template instantiate="bool expression">

This makes showing and hiding a custom element like a login component incredibly easy 这使得显示和隐藏自定义元素(如登录组件)异常容易

example: 例:

login.html login.html

<html>
  <body>
    <element name="x-login" constructor="LoginComponent" extends="div">
      <template instantiate="if showLogin">
        ...
        <button on-click="validateLogin()">Login</button>
      </template>
    </element>
  </body>
</html>

LoginComponent.dart LoginComponent.dart

import "package:web_ui/web_ui.dart";

class LoginComponent extends WebComponent {
  bool showLogin = true;

  bool validateLogin() {
    ...
    showLogin = false;
  }
}

Check out http://www.dartlang.org/articles/dart-web-components/ for further details 查看http://www.dartlang.org/articles/dart-web-components/了解更多详细信息

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM