因此,我的Polymer.Dart项目在Chromium中运行正常(在Dart代码上运行),但是当我进行pub升级和pub构建时,采样器脚手架可以继续工作,但是纸张按钮,纸张对话框,纸张进度...元素根本不起作用出现!
我的HTML文件如下所示
<link href='http://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="import" href="packages/paper_elements/paper_button.html">
<link rel="import" href="packages/paper_elements/paper_dialog_transition.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
...
<paper-button id="infoUPC" class="cd-read-more" raised>Read more</paper-button>
...
<script src="education.dart" type="application/dart"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
教育镖
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:paper_elements/paper_dialog.dart';
main() {
initPolymer().run(() {
Polymer.onReady.then((_) {
querySelector('#infoFHV').onClick.listen(
(_) => toggleDialog('fhv'));
querySelector('#infoUPC').onClick.listen(
(_) => toggleDialog('upc'));
querySelector('#infoTU').onClick.listen(
(_) => toggleDialog('tu'));
});
});
}
toggleDialog(language) =>
(querySelector('paper-dialog[edu=$language]') as PaperDialog)
.toggle();
pubspec.yaml
name: polydart_resume
version: 0.0.1
author: Shady
description: Test app
dependencies:
core_elements: '>=0.3.2 <0.5.0'
custom_element_apigen: ">= 0.1.1 <0.2.0"
polymer: ">=0.14.0 <0.16.0"
web_components: ">=0.9.0 <0.10.0"
paper_elements: ">=0.5.0 <0.6.0"
transformers:
- polymer:
entry_points:
- web/index.html
pub build不会给我这些文件的任何警告或错误,但是我肯定会缺少一些对吗?
您有两个进入页面index.html
和languages.html
。仅languages.html
调用您的自定义,main()
但仅index.html
在您的pubspec.yaml
变压器配置中。
index.html
由于此脚本标签,将调用main()
Polymer提供的默认方法,但不会调用您的自定义方法main()
<script type="application/dart">export 'package:polymer/init.dart';</script>
languages.html
具有正确的脚本标签
<script type="application/dart" src="languages.dart"></script>
但这无法按预期工作,因为languages.html
您的聚合物变压器entry_points
配置中未列出
transformers:
- polymer:
entry_points:
# - web/index.html
- web/languages.html
从评论:
问:您是否从抽屉(。<core-item label="Languages" url="chapters/languages.html"></core-item>
)()中的链接加载language.html ?–GünterZöchbauer25分钟前
答:是的,那正是我在做什么。
这不是通常在Dart中开发应用程序的方式。可以,但是Dart适用于SPA(http://en.wikipedia.org/wiki/Single-page_application)。
如果您从Dart应用程序加载另一个页面,则就像启动一个完全不同的应用程序一样。以这种方式加载的每个页面(应用程序)都需要Polymer应用程序的所有部分才能工作。
通常在Dart中,您只有一个进入页面(entry_point
),并且当您想要更改显示给用户的内容(一个新视图)时,您将替换当前页面中的内容,而不是加载另一个页面(例如,其中Polymer元素是方便使用,您只需删除一个元素(视图)并添加另一个元素)。
Dart还具有相当大的样板代码大小,每次加载另一个页面时都必须加载,这效率很低。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句