聚合物的飞镖问题(dart problems with polymer)
我正在尝试用dart和Polymer制作应用程序。 我有这个代码：
app.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/login.css">
<link rel="import" href="vistas/loginUI.html">
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>Prueba</h1>
<login-usuario></login-usuario>
<script type="application/dart"> export 'package:polymer/init.dart';</script>
</body>
</html>
loginUI.html：
<polymer-element name="login-usuario">
<meta charset="utf-8">
<template>
<link rel="stylesheet" href="../css/login.css">
<div id="login">
<h1><strong>Bienvenido</strong></h1>
<fieldset>
<p><input type="text" required id="usuario" name="usuario"
placeholder="Usuario"></p>
<p><input type="password" required id="password" name="password"
placeholder="Contraseña"></p>
<p><button>ENTRAR</button></p>
</fieldset>
</div>
<p>Hi</p>
</template>
<script type="application/dart" src="loginUI.dart"></script>
</polymer-element>
loginUI.dart
import 'package:polymer/polymer.dart';
@CustomTag('login-usuario')
class LoginUI extends PolymerElement{
@observable String usuario;
@observable String password;
@observable bool errorConectar;
LoginUI.created() : super.created();
}
但是当我运行应用程序时，我无法显示任何内容。 此外，当我创建一个新的聚合物proyect（示例）时，我运行应用程序时都不能显示任何内容。 我加入了聚合物依赖性。
非常感谢你！
I'm trying to make an application in dart and Polymer. I have this code:
app.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/login.css">
<link rel="import" href="vistas/loginUI.html">
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>Prueba</h1>
<login-usuario></login-usuario>
<script type="application/dart"> export 'package:polymer/init.dart';</script>
</body>
</html>
loginUI.html:
<polymer-element name="login-usuario">
<meta charset="utf-8">
<template>
<link rel="stylesheet" href="../css/login.css">
<div id="login">
<h1><strong>Bienvenido</strong></h1>
<fieldset>
<p><input type="text" required id="usuario" name="usuario"
placeholder="Usuario"></p>
<p><input type="password" required id="password" name="password"
placeholder="Contraseña"></p>
<p><button>ENTRAR</button></p>
</fieldset>
</div>
<p>Hi</p>
</template>
<script type="application/dart" src="loginUI.dart"></script>
</polymer-element>
loginUI.dart
import 'package:polymer/polymer.dart';
@CustomTag('login-usuario')
class LoginUI extends PolymerElement{
@observable String usuario;
@observable String password;
@observable bool errorConectar;
LoginUI.created() : super.created();
}
But when I run the application, I can not display anything. Also, when I create a new polymer proyect (the example) , neither I can not display anything when I run the application. I added the polymer dependence.
thank you very much!
最满意答案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/login.css">
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="vistas/loginUI.html">
<!--<script src="packages/browser/dart.js"></script>-->
</head>
<body>
<h1>Prueba</h1>
<login-usuario></login-usuario>
<script type="application/dart"> export 'package:polymer/init.dart';</script>
</body>
</html>
。
<!-- how many ../ you need depends on where your element files are stored -->
<link rel="import" href="../../packages/polymer/polymer.html">
<polymer-element name="login-usuario">
<meta charset="utf-8">
<template>
<link rel="stylesheet" href="../css/login.css">
<div id="login">
<h1><strong>Bienvenido</strong></h1>
<fieldset>
<p><input type="text" required id="usuario" name="usuario"
placeholder="Usuario"></p>
<p><input type="password" required id="password" name="password"
placeholder="Contraseña"></p>
<p><button>ENTRAR</button></p>
</fieldset>
</div>
<p>Hi</p>
</template>
<script type="application/dart" src="loginUI.dart"></script>
</polymer-element>
你的pubspec.yaml应该包含
transformers:
- polymer:
entry_points:
- web/app.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/login.css">
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="vistas/loginUI.html">
<!--<script src="packages/browser/dart.js"></script>-->
</head>
<body>
<h1>Prueba</h1>
<login-usuario></login-usuario>
<script type="application/dart"> export 'package:polymer/init.dart';</script>
</body>
</html>
.
<!-- how many ../ you need depends on where your element files are stored -->
<link rel="import" href="../../packages/polymer/polymer.html">
<polymer-element name="login-usuario">
<meta charset="utf-8">
<template>
<link rel="stylesheet" href="../css/login.css">
<div id="login">
<h1><strong>Bienvenido</strong></h1>
<fieldset>
<p><input type="text" required id="usuario" name="usuario"
placeholder="Usuario"></p>
<p><input type="password" required id="password" name="password"
placeholder="Contraseña"></p>
<p><button>ENTRAR</button></p>
</fieldset>
</div>
<p>Hi</p>
</template>
<script type="application/dart" src="loginUI.dart"></script>
</polymer-element>
Your pubspec.yaml should contain
transformers:
- polymer:
entry_points:
- web/app.html
更多推荐
发布评论