使用此代码，我可以使用 变量打印 “主要内容” 区域中所选项目的 {{item.name}}（即标签模板之外的 is="dom-repeat"） {{selected}} 和 attr-for-selected="name"。 但是我想打印所选项目的更多详细信息，而不仅仅是一个属性，在本例中是名称。
<!-- Main Contetnt -->
<div class="content">
<h1>{{selected}}</h1> *This one works fine*
<h1>{{item.city}}</h1> *But these two don't*
<h1>{{item.date}}</h1>
</div>
我想打印 city 和 date 以及 name 打印
有人知道这个问题的线索吗？ PS：我的元素在代码底部调用自己，现在它正在工作。但我以后会因此而遇到任何问题吗？
<dom-module id="x-app">
<template id="app">
<iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
<paper-drawer-panel id="navDrawerPanel" responsive-width="1280px">
<div class="nav" drawer>
<!-- Nav Content -->
</div>
<paper-drawer-panel id="mainDrawerPanel" class="main-drawer-panel" main responsive-width="600px"
drawer-width="[[_computeListWidth(_isMobile)]]" drawer-toggle-attribute="list-toggle"
narrow="{{_isMobile}}">
<paper-header-panel class="list-panel" drawer>
<!-- List Toolbar -->
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
</paper-toolbar>
<iron-selector selected="{{selected}}" attr-for-selected="name" id="selector">
<template is="dom-repeat" class="list" items="{{data}}" as="item" id="tmpl">
<div name="{{item.name}}" on-click="_listTap">
<div class="item">
<img class="avatar" src="{{item.image}}">
<div class="pad">
<div class="primary">
<span>{{index}}</span>
<span>{{item.name}}</span>
</div>
<div class="secondary">{{item.date}}</div>
<div class="secondary dim">{{item.city}}</div>
</div>
<!-- <iron-icon icon$="{{iconForItem(item)}}"></iron-icon> -->
</div>
<div class="border"></div>
</div>
</template>
</iron-selector>
</paper-header-panel>
<paper-header-panel class="content-panel" main>
<!-- Main Toolbar -->
<paper-toolbar>
<paper-icon-button icon="arrow-back" list-toggle></paper-icon-button>
</paper-toolbar>
<!-- Main Contetnt -->
<div class="content">
<h1>{{selected}}</h1>
<h1>{{item.city}}</h1>
<h1>{{item.date}}</h1>
</div>
</paper-header-panel>
</paper-drawer-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: 'x-app',
properties: {
},
ready: function() {
var drawerPanel = document.querySelector('#mainDrawerPanel');
drawerPanel.openDrawer();
},
_computeListWidth: function(isMobile) {
// when in mobile screen size, make the list be 100% width to cover the whole screen
return isMobile ? '100%' : '33%';
},
_listTap: function() {
var drawerPanel = document.querySelector('#mainDrawerPanel');
drawerPanel.closeDrawer();
}
});
</script>
</dom-module>
<body>
<x-app></x-app>
</body>
使用
selected-itemselectedselectedItem所以你的
iron-selector<iron-selector selected-item="{{selectedItem}}" attr-for-selected="name" id="selector">
然后向您的
div<div name="{{item.name}}" city$="[[item.city]]" date$="[[item.date]]" on-click="_listTap">
然后设置一个观察者来监视
selectedItem...
observers: [ '_selectedItemChanged(selectedItem)' ],
_selectedItemChanged: function(el) {
this.city = el.getAttribute('city');
this.date = el.getAttribute('date');
},
...
然后您可以使用以下内容：
<div class="content">
<h1>{{city}}</h1>
<h1>{{date}}</h1>
</div>