聚合体1.0:多玛中可点击的项目-重复例如包含更多信息的铁页(联系人列表)
我正在建立一个聚合物1.0的联系人名单。当用户单击某个名称时，应该会打开一个(动画)页面以了解更多详细信息。所有这些数据元素都是从外部.json文件中提取的。
关于这一办法的两个问题：
( 1)从哪里开始？例如，如何将铁页或霓虹灯动画页绕在当前设置(可搜索，这也是临时原因，它是一个多址重复而不是铁列表)：
<template id="resultlist" is="dom-repeat" items="{{data}}" filter="contactFilter">
<paper-item>
<paper-item-body two-line>
<div>{{item.name}}</div>
<div secondary>{{item.number}}</div>
</paper-item-body>
</paper-item>
</template>2)为了快速试用绑定选项，我创建了一个纸对话框(而不是页面行为)，它显示被选中的人的进一步数据.如果要显示选定的名称，则在该纸面对话框的顶部。但是，我只在我的.json文件中获得数组的名称。如何设置代码以显示所选项的{{item.name}}？
Ps。我知道来自Rob (https://github.com/robdodson/contacts-app)的联系人应用程序，但是我不知道如何在Polymer1.0中实现它。
更新27.10.2015
在Hugo's回答之后，我无法获得在dom-模块结构中工作的解决方案。
抱歉误会了，但我不知道我哪里错了。
必须采取以下措施：
phonebook.html，，它的作用像一个索引
...
<body unresolved>
<template is="dom-bind" id="application">
<neon-animated-pages selected="[[selected]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
<contact-list></contact-list>
<contact-details></contact-details>
</neon-animated-pages>
</template>
<script>
var application = document.querySelector('#application');
application.selected = 0;
document.addEventListener('show-details', function() {
application.selected = 1;
});
document.addEventListener('show-list', function() {
application.selected = 0;
});
</script>
</body>DOM-模块contact-list.html，列表它自己.
<dom-module id="contact-list">
<template>
<style include="phonebook-styles"></style>
<iron-ajax url="../data/data.json" handle-as="json" last-response="{{data}}" auto></iron-ajax>
<div class="container">
<h3>Contactlist:</h3>
<div class="template-container">
<template is="dom-repeat" id="templateUsers" items="{{data}}">
<paper-item on-tap="showDetails">
<paper-item-body two-line>
<div>{{item.name}}</div>
<div secondary>{{item.phonenumber}}</div>
</paper-item-body>
<div class="item-details-link">
<iron-icon icon="account-circle"></iron-icon>
</div>
</paper-item>
</template>
</div>
</div>
</template>
<script>
Polymer({
is: 'contact-list',
properties: {
selectedContact:{
type:Object,
value:function(){
return null;
}
}
},
showDetails: function(ev) {
var data = this.$.templateUsers.itemForElement(ev.target);
//alert(JSON.stringify(data)) // works with data chosen data selection...
this.selectedContact = data;
this.fire('show-details', this.selectedContact);
}
});
</script>
</dom-module>DOM-模块contact-details.html，的细节-列表.
<dom-module id="contact-details">
<template>
<!-- Do I need to declare the .json in my details module? -->
<iron-ajax url="../data/data.json" handle-as="json" last-response="{{data}}" auto></iron-ajax>
<paper-icon-button icon="arrow-back" on-tap="showList"></paper-icon-button>
<h3>Contact details</h3>
<template is="dom-repeat" items="{{data}}">
<div>{{selectedContact.name}}</div>
</template>
</template>
<script>
Polymer({
is: 'contact-details',
showList: function() {
this.fire('show-list');
}
});
</script>
</dom-module>一切，比如过渡，都是有用的。选择的联系人也会显示在alertbox中(在contact-list.html中注释掉)，但不会转发到contact-details.html页面。
回答 1
Stack Overflow用户
发布于 2015-10-21 14:39:36
实现该解决方案有多个步骤：
- 设置霓虹灯动画页面(其中一页为联系人列表，另一页为详细信息)
- 显示联系人列表(您已经有了)
- 向元素中添加"selectedContact“属性
- 在list items元素中添加一个抽头/单击处理程序，并在处理程序中设置selectedContact。您需要单击DOM元素中的联系人项。(请查看这里的一个示例：http://jsbin.com/lofarabare/6/edit )
- 可以将联系人详细信息页元素绑定到selectedContact属性，例如{{selectedContact.name}}
- 在处理程序中，还更改霓虹灯动画页选中的属性，让它将动画显示给另一个页面。-额外反馈
我检查了你处理事件的方式，反馈如下：
- 给元素一些id，以便您可以将事件侦听器直接添加到它们(例如application.$.myContactList.addEventListener('show-detail'，函数(Ev){.})
- 您从联系人列表中触发事件的方式是正确的，但是您没有在事件侦听器中读取“显示详细信息”事件的事件数据。事件侦听器接收作为参数"ev“的事件。可以使用ev.detail获取事件数据。
- 使用事件数据(选定的联系人)，您可以更新联系人详细信息组件。给它一些id，比如'details‘，然后更新'selectedContact’属性。**您需要在details组件中声明selectedContact，现在还没有它**
https://stackoverflow.com/questions/33256314
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号