当核心项目放在子菜单中时,我在访问核心项目标签时遇到问题。 这是一个例子。
<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}}正确显示。 我是聚合物和飞镖的新手,很抱歉,如果我的问题非常愚蠢。 感谢
答案 0 :(得分: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;