Полимерные элементы не работают после сборки паба. Я что-то забыл?

поэтому мой проект Polymer.Dart отлично работает в Chromium (работает на коде Dart), но когда я обновляю паб и собираю паб, сэмплер-скаффолд продолжает работать, но элементы paper-button, paper-dialog, paper-progress... просто не появление!

Мой 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 не дает мне никаких предупреждений или ошибок в этих файлах, но я наверняка что-то упускаю, верно?


dart dart2js polymer dart-polymer
person Shady    schedule 30.10.2014    source источник
comment
Вы загружаете страницу из выходного каталога сборки (URI файла) или с помощью веб-сервера? Вы пытались загрузить страницу из Chrome/Firefox/IE/..., используя тот же URL-адрес, который вы использовали в Dartium, который обычно загружается из pub serve при запуске из DartEditor.   -  person Günter Zöchbauer    schedule 30.10.2014
comment
Хорошо, теперь я использовал pub serve, и он показывает кнопки и индикаторы выполнения, НО кажется, что скрипты загружаются неправильно (не срабатывает при нажатии, индикаторы выполнения не анимируются).   -  person Shady    schedule 30.10.2014
comment
Отображает ли консоль Chrome DevTools какой-либо вывод об ошибке?   -  person Günter Zöchbauer    schedule 30.10.2014
comment
Вы пробовали, работает ли это, когда вы удаляете теги скрипта JavaScript?   -  person Günter Zöchbauer    schedule 30.10.2014
comment
В консоли Chrome нет ошибок, и я попытался удалить сценарии JS, но все равно (есть еще одна страница, на которой я использую только один скрипт dart и вообще не использую JS, что тоже не работает...). Правилен ли код Dart (см. выше)?   -  person Shady    schedule 30.10.2014
comment
Выглядит хорошо до сих пор. Не могли бы вы попробовать переместить тег сценария дротика в нижнюю часть тега <body> (последний элемент внутри тела).   -  person Günter Zöchbauer    schedule 30.10.2014
comment
@GünterZöchbauer Сделал это и удалил из него JS-скрипты, ничего не меняется =( Возможно ли, что сэмплер-скаффолд и мой пользовательский элемент 'my-drawer' как-то выводят? Я загрузил код файлов на Git Gist gist.github.com/SH4DY/2253903fccac54771b9e   -  person Shady    schedule 30.10.2014

Ответы (2)


arrow_upward
1
arrow_downward

У вас есть две страницы входа 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

Из комментариев:

Вопрос. Загружаете ли вы languages.html по ссылке в drawer.html (<core-item label="Languages" url="chapters/languages.html"></core-item>)? - Гюнтер Цохбауэр 25 минут назад

A: Да, сэр, это именно то, что я делаю.

Это не то, как обычно разрабатывают приложения в Dart. Можно, но Dart предназначен для SPA (http://en.wikipedia.org/wiki/Single-page_application).

Если вы загружаете другую страницу из приложения Dart, это похоже на запуск совершенно другого приложения. Каждая страница (приложение), загружаемая таким образом, требует для работы всех частей приложения Polymer.

Обычно в Dart у вас есть только одна страница входа (entry_point), и когда вы хотите изменить то, что отображается пользователю (новый вид), вы заменяете содержимое на текущей странице вместо того, чтобы загружать другую (это, например, где элементы Polymer удобны тем, что вы просто удаляете один элемент (представление) и добавляете другой).

Dart также имеет довольно большой размер шаблонного кода, который должен загружаться каждый раз, когда вы загружаете другую страницу, что довольно неэффективно.

person Günter Zöchbauer    schedule 30.10.2014
comment
Но мне нужно где-то инициализировать полимер, верно? Когда я удаляю index.html из точек входа, страница вообще не загружается. Могу ли я установить слушателей где-нибудь еще, кроме пользовательского основного? - person Shady; 30.10.2014
comment
Какую из этих двух страниц вы на самом деле запускаете? Если вы запускаете languages.html, не имеет значения, существует ли index.html или указан ли он в entry_points или нет. - person Günter Zöchbauer; 30.10.2014
comment
Запускаю index.html, потому что в него встроен сэмплер-скаффолд. Скаффолд подгружает все остальные страницы в карточке (но я не уверен, где и как он это делает). Кстати: скрипт начальной загрузки dart.js больше не нужен? Я только что видел это в этом руководстве dartlang.org/docs/tutorials/ connect-dart-html/#summary - person Shady; 30.10.2014
comment
Вы загружаете languages.html по ссылке в drawer.html (` ‹core-item label=Languages ​​url=chapters/languages.html›‹/core-item›`)? - person Günter Zöchbauer; 30.10.2014
comment
Да, сэр, это именно то, что я делаю. Разве я не должен так поступать? - person Shady; 30.10.2014
comment
Понятно, я этого и ожидал. Можете ли вы порекомендовать мне пример кода, в котором я могу увидеть лучшие практики замены представлений? Большое спасибо за терпение, Гюнтер! - person Shady; 30.10.2014
comment
Хм, лучшие практики - это сложно. Например, вы можете использовать этот пакет pub.dartlang.org/packages/bwu_polymer_routing или использовать <template if="{{...}}">, где содержимое тега <template> отображается только тогда, когда выражение if оценивается как истинное, или вы можете сделать это принудительно, используя querySelector('#view1').remove();, querySelector('#placeholder').append(new View2());. Это во многом зависит от типа приложения, которое вы хотите создать, и ваших личных предпочтений. - person Günter Zöchbauer; 30.10.2014

arrow_upward
1
arrow_downward

Поскольку моя проблема на самом деле не была связана с кодом, а была более фундаментальной, я нашел образец проекта на сайте www.polymer-project.org, где можно увидеть рекомендуемый метод маршрутизации. Я считаю, что вводная документация по полимерам недостаточно хорошо освещает эту тему...

person Shady    schedule 31.10.2014