使用带有 Dart 而不是 JS 的 Web 组件的单页应用程序 (SPA)

Question

我正在尝试在链接示例中执行single page application (SPA) using web components。但是使用 Dart 而不是 javascript。我想把整个<core-scaffold> 放在一个聚合物元素中。布局按预期工作，但是当我到达“使用数据模型简化标记”部分时，我无法理解如何将我的 dart 模型绑定到示例中的 javascript 模型。这个属性<template is="auto-binding"> 是否应该在 Polymer 元素的主模板中，或者去哪里？各位专家有什么建议吗？

编辑：好的，我正在为这个问题添加一些代码。 在 darteditor 中，我开始了一个新项目，并选择了使用聚合物库的选项。在创建的 main-html 文件中，我所做的只是删除 <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 中运行，并看到了具有三个菜单选项的精美布局。主区域在启动时有“single”一词，因为选择了第一个菜单选项。当我单击第二个菜单选项时，出现此错误：

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"> 而不是除了。模型是包含<core-scaffold> 的 Polymer 元素的类。

如果您添加更多代码来显示您尝试完成的工作，则更容易提出具体建议。

更新

我变了

@observable var route = 'one';

摆脱异常 并添加了

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

查看分配了哪些值（打印“一”、“二”、“三”）。

还添加了

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