在pub构建之后,聚合物元素不起作用 - 我忘记了什么?

时间:2014-10-30 09:58:02

标签: dart polymer dart-polymer dart2js

所以我的Polymer.Dart项目在Chromium中正常运行(在Dart代码上运行)但是当我进行pub升级和pub构建时,sampler-scaffold继续工作,但是paper-button,paper-dialog,paper-progress ... elements只是没有出现!

我的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 -->

education.dart

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不会对这些文件发出任何警告或错误,但我肯定错过了一些正确的内容?

2 个答案:

答案 0 :(得分:1)

您有两个输入页面index.htmllanguages.html。只有languages.html才会调用您的自定义main(),但只有index.html位于您的pubspec.yaml变压器配置中。

由于此脚本标记,

index.html将调用Polymer提供的默认main()方法,而不是您的自定义main()

<script type="application/dart">export 'package:polymer/init.dart';</script>

languages.html具有正确的脚本标记

<script type="application/dart" src="languages.dart"></script>

但是这不能按预期工作,因为languages.html未在您的Polymer变换器entry_points配置中列出

transformers:
- polymer:
    entry_points:
#    - web/index.html
    - web/languages.html

来自评论:

问:您是否从drawer.html(<core-item label="Languages" url="chapters/languages.html"></core-item>)中的链接加载languages.html? - GünterZöchbauer25分钟前

答:Yessir正是我正在做的事情。


这不是人们通常在Dart中开发应用程序的方式。你可以,但Dart是SPA(http://en.wikipedia.org/wiki/Single-page_application)。

如果您从Dart应用程序加载另一个页面,这就像启动一个不同的应用程序。以这种方式加载的每个页面(app)都需要Polymer应用程序的所有部分才能工作。

通常在Dart中,您只有一个条目页面(entry_point),当您想要更改显示给用户的内容(新视图)时,您将替换当前页面中的内容而不是加载另一个内容(例如,在Polymer元素很方便的情况下,您只需删除一个元素(视图)并添加另一个元素()。

Dart也有一个相当大的样板代码大小,每次加载另一个效率相当低的页面时都必须加载它。

答案 1 :(得分:1)

因为我的问题与代码无关,但更为基础,我在www.polymer-project.org上找到了一个示例项目,其中可以看到recommended routing method。我发现关于聚合物的介绍文档并不能很好地涵盖这个主题......