Question

我正在尝试按照链接示例执行single page application (SPA) using web components。但用Dart而不是javascript。我想将整个<core-scaffold>放在Polymer Element中。布局按预期工作，但是当我到达“使用数据模型简化标记”部分时，我无法理解如何绑定与示例中的javascript模型等效的dart模型。此属性<template is="auto-binding">是否应该在Polymer元素的主模板中，或者它在哪里？你们专家的任何指示？

编辑：好的，我正在为这个问题添加一些代码。在darteditor我开始了一个新项目，选择使用聚合物库。在创建的main-html文件中，我所做的就是删除<click-counter>中的“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元素中，那么除了<template is="auto-binding">之外，您还需要使用此。该模型是包含<core-scaffold>。

的Polymer元素的类

如果您添加更多代码以显示您尝试完成的内容，则可以更轻松地提出具体建议。

更新

我改变了

@observable var route = 'one';

摆脱异常并添加了

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

查看分配了哪些值（打印＆＃39;一个＆＃39;，＆＃39;两个＆＃39;，＆＃39;三个＆＃39;）。

并且还添加了

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

使用Dart而不是JS的Web组件的单页面应用程序（SPA）

1 个答案:

更新