Polymer 1.0：dom 中的可点击项目 - 重复例如包含更多信息的铁页（联系人列表）

Question

我正在 Polymer 1.0 中设置联系人列表。当用户单击名称时，应该会打开一个（动画）页面以获取更多详细信息。所有这些数据元素都来自外部 .json 文件。

关于这种方法的两个问题..：

1) 从哪里开始？例如，我如何围绕我当前的设置包装铁页或霓虹灯动画页（这是可搜索的，这也是-临时-原因它是 dom-重复而不是铁列表):

<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 Dodson (https://github.com/robdodson/contacts-app) 的联系人应用程序，但我无法弄清楚它应该如何在 Polymer 1.0 中完成。

2015 年 10 月 27 日更新

在回答后，我无法获得在 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-module 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-module contact-details.html, details-list.

<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>

一切，比如过渡，都能正常工作。所选联系人也会显示在警告框中（在 contact-list.html 中被注释掉），但不会转发到 contact-details.html 页面。

Answer 1

实施解决方案有多个步骤：

设置霓虹灯动画页面（一页是联系人列表，另一页是详细信息）
显示联系人列表（您已有此列表）
向您的元素添加 "selectedContact" 属性
向列表项元素添加一个 tap/click 处理程序，并在处理程序中设置 selectedContact。您需要从单击的 DOM 元素中获取联系人项目。（在此处查看示例：http://jsbin.com/lofarabare/6/edit）
您可以将联系人详细信息页面元素绑定到 selectedContact 属性，例如 {{selectedContact.name}}
在处理程序内部还更改选定的霓虹灯动画页面属性以使其将动画显示到其他页面。 -- 额外反馈

我查看了你们处理事件的方式，反馈如下：

为元素提供一些 id，以便您可以直接向它们添加事件侦听器（例如 application.$.myContactList.addEventListener('show-detail',function(ev){...})
您从联系人列表触发事件的方式是正确的，但是您没有读取 'show-detail' 事件的事件侦听器中的事件数据。事件侦听器接收事件作为参数 "ev"。您可以使用 ev.detail
使用事件数据（所选联系人），您可以更新联系人详细信息组件。给它一些像 'details' 这样的 id，然后更新 'selectedContact' 属性。 **您需要在详细信息组件中声明 selectedContact，现在您没有它 **

Polymer 1.0：dom 中的可点击项目 - 重复例如包含更多信息的铁页（联系人列表）

Polymer 1.0: Clickable item in dom-repeat to e.g. iron-page which contains further info (contact list)

polymer

polymer-1.0