dart - 使用带有 Dart 而非 JS 的 Web 组件的单页应用程序 (SPA)

Question

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

编辑:好的，我正在为这个问题添加一些代码。 在 darteditor 中，我开始了一个新项目，并选择了使用聚合物库的选项。在创建的主 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">