聚合物飞镖芯子菜单答案

【问题标题】：polymer dart core-submenu聚合物飞镖芯子菜单
【发布时间】：2014-10-12 19:51:53
【问题描述】：

当 core-item 放置在子菜单中时，我在访问 core-item 标签时遇到问题。这是一个例子。

<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 polymer dart-polymer core-elements

【解决方案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;

【讨论】：