Одностраничное приложение (SPA) с использованием веб-компонентов с Dart, а не JS

Question

Я пытаюсь сделать одностраничное приложение (SPA), используя веб-компоненты, как в связанном примере. Но с Дарт вместо вместо JavaScript. Я хотел бы поставить весь <core-scaffold> в полимерном элементе. Макет работает должным образом, но когда я перехожу к части "Упрощение разметки с использованием модели данных", я не могу понять, как связать мою модель дротика, эквивалентную модели javascript в примере. Должен ли этот атрибут <template is="auto-binding"> быть в основном шаблоне элемента Polymer или куда это идет? Любые указатели от ваших экспертов?

Изменить: ОК, я добавляю код на этот вопрос. В darteditor я запустил новый проект с опцией использования выбранной библиотеки полимеров. В созданном main-html-файле все, что я сделал, это удалил атрибут "counter" в <click-counter>, Я добавил эти зависимости paper_elements: 0.5.0, polymer: any Я заменил все в clickcounter.dart на:

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
  @observable var route = 0;
  @observable List<dynamic> pages = [
                           {'name': 'Single', 'hash': 'one'}, 
                           {'name': 'page', 'hash': 'two'}, 
                           {'name': 'app', 'hash': 'three'}
                     ];

  ClickCounter.created() : super.created() {
  } 
}

И я заменил все в clickcounter.html:

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/core_elements/core_scaffold.html">
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_menu.html">
<link rel="import" href="packages/core_elements/core_item.html">
<link rel="import" href="packages/core_elements/core_transition.html">
<link rel="import" href="packages/core_elements/core_animated_pages.html">
<link rel="import" href="packages/core_elements/core_animated_pages/transitions/core_transition_pages.html">

<link rel="import" href="packages/paper_elements/paper_item.html">

<polymer-element name="click-counter">
  <template>
    <style>
    </style>

    <core-scaffold>
      <core-header-panel navigation flex mode="waterfall">
        <core-toolbar>Application</core-toolbar>
        <core-menu theme="core-light-theme" valueattr="hash" selected="{{route}}">
          <template repeat="{{page in pages}}">
            <paper-item icon="settings" label="{{page['name']}}" hash="{{page['hash']}}">
              <a _href="#{{page['hash']}}"></a>
            </paper-item>
          </template>
        </core-menu>
      </core-header-panel>
      <div tool>Title</div>
      <core-animated-pages  selected="{{route}}" transitions="slide-from-right">
        <template repeat="{{page in pages}}">
          <section hash="{{page['hash']}}" layout vertical center-center>
            <div>{{page['name']}}</div>
          </section>
        </template>
      </core-animated-pages>
    </core-scaffold>

  </template>
  <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

Я бегу в Dartium и вижу отличную компоновку с тремя опциями меню. Основная область имеет слово "одиночный" при запуске, так как выбран первый пункт меню. Когда я нажимаю второй пункт меню, я получаю эту ошибку:

Exception caught during observer callback: TypeError: Cannot read property 'classList' of undefined
    at core-animated-pages.Polymer.applySelection (http://localhost:8081/spa_test.html:939:15)
    at core-animated-pages.Polymer.selectedItemChanged (http://localhost:8081/spa_test.html:4389:14)
    at core-animated-pages.g.invokeMethod (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:13:25932)
    at core-animated-pages.g.notifyPropertyChanges (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:13:24037)
    at Object.x.report_ (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:12:18274)
    at Object.S.check_ (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:12:22612)
    at c (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:12:12181) polymer.concat.js:4861 

Answer 1

Если вы помещаете все в элемент Polymer, вы используете этот элемент Polymer вместо <template is="auto-binding"> не в дополнение к. Модель - это класс элемента Polymer, который содержит <core-scaffold>,

Если вы добавите больше кода, который показывает, что вы пытаетесь выполнить, легче будет сделать конкретные предложения.

Обновить

Я изменился

@observable var route = 'one';

избавиться от исключения и добавил

routeChanged(oldVal, newVal) {
  print(newVal);
}

чтобы увидеть, какие значения назначены (печатает "один", "два", "три").

а также добавил

<link rel="import" href="packages/paper_elements/paper_item.html">