Polymer 1.0：dom中的可点击项目，重复至包含更多信息的iron页面（联系人列表）

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

此方法有两个问题..：

1） 从哪里开始？例如，如何围绕当前设置（可搜索，这也是-临时-它是dom重复而不是铁列表的原因）包装一个iron页面或neon动画页面：

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

联系人列表：
{{item.name}
{{item.phonenumber}
聚合物({
是：'联系人列表'，
特性：{
所选联系人：{
类型：对象，
值：函数（）{
返回null；
}
}
},
showDetails:函数（ev）{
var数据=此.$.templateUsers.itemForElement（ev.target）；
//警报（JSON.stringify（data））//用于选择的数据数据选择。。。
this.selectedContact=数据；
this.fire（'show-details'，this.selectedContact）；
}
});

DOM模块联系人详细信息.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>

联系方式
{{selectedContact.name}
聚合物({
是：'联系方式'，
showList:function（）{
这是一场火灾（“演出名单”）；
}
});

---

一切，比如过渡，都起作用了。所选联系人也会显示在警报框中（在

联系人列表.html

中注释掉），但不会转发到

联系人详细信息.html

页面。

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

• 设置霓虹灯动画页面（一页是联系人列表，另一页是详细信息）
• 显示联系人列表（您已拥有此联系人）
• 将“selectedContact”属性添加到元素中
• 将点击/点击处理程序添加到列表项元素，并在处理程序中设置selectedContact。您需要从单击的DOM元素中获取联系人项。（请在此勾选一个示例：）
• 您可以将联系人详细信息页面元素绑定到selectedContact属性，例如{{selectedContact.name}
• 在处理程序内部，还可以更改neon animated pages selected属性，使其将动画显示到其他页面。 --额外反馈

我检查了您处理事件的方式，反馈如下：

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

---

霓虹动画的演示页面可能会帮助您开始。元素源也包含演示页面的源。您好，感谢您的帮助性评论。深入了解霓虹动画页面，我已重新创建了应用程序结构，以便它与我的dom repeat设置配合使用，如上所示。（借助Dodson's Polycasts-的模板）。第1点到第4点是清楚的。第4点与jsbin中显示的alertbox一起工作，但与jsbin中一样，从联系人列表本身触发，这可能是因为它在联系人列表中声明了。此时，我迷路了。是否可以更清楚一点处理？该警报仅用于显示如何获取绑定项。Inst在警报的ead中，您只需更改所选页面。您可以检查更新的JSBin，包括霓虹灯动画页面，感谢您的工作示例！几乎就在那里…尽管联系人列表的dom模块是一个单独的模板文件。代码

this.$.pages.selected=1；

在未定义“selected”的地方引发控制台错误d、 “selected”从索引文件中工作（例如，我的结构基于该文件。我如何

此。$.pages.selected=1；

-它被放置到我的单独dom模块中，以便contactslist工作…？您可以在contactlist元素中触发和事件：this.fire（'contactSelected'，eventDataHere），并在您可以访问霓虹灯动画页面的某个位置订阅事件，以便设置其选定属性。

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