dart - polymer Dart 芯子菜单

Question

将核心项目放在子菜单中时，访问核心项目标签时遇到问题。
这是一个例子。

<polymer-element name="page-element">
  <template>
  <style>
  </style>

  <core-scaffold>

  <core-header-panel navigation flex>
    <core-toolbar id="navheader">
      <span>Menu</span>
    </core-toolbar>
    <core-menu selected="0" selectedItem="{{item}}">
      <core-item icon="home" label="item1"></core-item>
      <core-item icon="info" label="item2"></core-item>
    <core-submenu icon="check-circle" label="submenu1">
        <core-item label="item3"></core-item>
        <core-item label="item4"></core-item>
      </core-submenu>

    </core-menu>
  </core-header-panel>

  <span tool>Title</span>

  <div class="content">
  {{item.label}}
  </div>
</core-scaffold>

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

以下是page_element.dart

import 'package:polymer/polymer.dart';
import 'package:core_elements/core_item.dart';


@CustomTag('page-element')
class PageElement extends PolymerElement {
  @published CoreItem item;

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

选择item1后，{{item.label}}正确显示。
我是聚合物和 Dart 的新手，如果我的问题很愚蠢，对不起。
谢谢

Answer 1

<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_submenu.html">

<polymer-element name="app-element">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <core-scaffold>

      <core-header-panel navigation flex>
        <core-toolbar id="navheader">
          <span>Menu</span>
        </core-toolbar>
        <core-menu selected="0" selectedItem="{{item}}">
          <core-item icon="home" label="item1"></core-item>
          <core-item icon="info" label="item2"></core-item>
          <!-- the submenu has its own selected state -->
          <core-submenu icon="check-circle" label="submenu1" selectedItem="{{subItem}}">
            <core-item label="item3"></core-item>
            <core-item label="item4"></core-item>
          </core-submenu>

        </core-menu>
      </core-header-panel>

      <span tool>Title</span>

      <div class="content">
        <div>resolved: {{subItem != null ? subItem.label : item.label}}</div> <!-- this is probably what you want -->
        <div>item: {{item.label}}</div>  <!-- these are just for debugging purposes -->
        <div>subItem: {{subItem.label}}</div>
      </div>
    </core-scaffold>

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

在类里

@published var item; // don't use CoreItem as type here because this throws if you select 'subMenu1' (is not a 'CoreItem')
@published var subItem;