Polymer2.0 - dom-repeat 在纸张标签内不起作用答案

【问题标题】：Polymer2.0 - dom-repeat is not working inside paper-tabsPolymer2.0 - dom-repeat 在纸张标签内不起作用
【发布时间】：2017-07-31 08:43:17
【问题描述】：

当我尝试在纸张标签中包含 dom-repeat 时，我得到的是空白显示而不是 dom-repeat 值

DOM-repeat 在 paper-tabs 外部但在 paper-tab 内部工作正常

Codepen-https://codepen.io/nagasai/pen/gxPQqQ

HTML：

<head>
  <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-tabs/paper-tabs.html">
  <link rel="import" href="paper-tabs/paper-tab.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>

<body>
  <x-custom></x-custom>
  <dom-module id="x-custom">
    <template>
  <template is="dom-repeat" items="{{employees}}">
      <div class="test">
        <div># [[index]]</div>
        <div>First name: <span>[[item.first]]</span></div>
        <div>Last name: <span>[[item.last]]</span></div>
        <div><img src="[[item.image]]" width="50px"></div>
      </div>  
    </template>
    </template>

    <dom-bind><template>
        <paper-tabs selected="{{selected}}" attr-for-selected="tab-name" fallback-selection="ui">
          <paper-tab tab-name="ui">Grid</paper-tab>
          <paper-tab tab-name="table">Table</paper-tab>
        </paper-tabs>
          <iron-pages selected="{{selected}}" attr-for-selected="tab-name" fallback-selection="ui" class="mainSection">
             <div tab-name="ui">
                       <template>
  <template is="dom-repeat" items="{{employees}}">
      <div class="test">
        <div># [[index]]</div>
        <div>First name: <span>[[item.first]]</span></div>
        <div>Last name: <span>[[item.last]]</span></div>
        <div><img src="[[item.image]]" width="50px"></div>
      </div>  
    </template>
      </template>
      </div>
      <div tab-name="table">
        Table
      </div>
      </iron-pages>
      </template>
    </dom-bind>


  </dom-module>

JS：

 class XCustom extends Polymer.Element {

      static get is() { return 'x-custom'; }

      static get properties() {
        return {
          employees: {
            type: Array,
            value() {
              return [
                {first: 'Bob', last: 'Smith',image:'https://dummyimage.com/300.png/09f/fff'},
                {first: 'Adam', last: 'Gilchrist',image:'https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png'},
                {first: 'Sally', last: 'Johnson'},
              ];
            }
          }
        }
      }

    }

    customElements.define(XCustom.is, XCustom);

【问题讨论】：

标签： polymer-2.x dom-repeat polymer-2.0

【解决方案1】：

Codepen：https://codepen.io/Sahero/pen/RZrvPN?editors=1111

HTML：

    <head>
  <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
  <link rel="import" href="polymer/polymer.html">

  <link rel="import" href="paper-tabs/paper-tabs.html">
  <link rel="import" href="paper-tabs/paper-tab.html">
  <link rel="import" href="iron-pages/iron-pages.html">

</head>

<body>
  <x-custom></x-custom>
  <dom-module id="x-custom">
    <template>

     <dom-repeat items="{{employees}}">                
      <template>    
        <div class="test">
        <div># [[index]]</div>
        <div>First name: <span>[[item.first]]</span></div>
        <div>Last name: <span>[[item.last]]</span></div>
        <div><img src="[[item.image]]" width="50px"></div>
        </div>    
     </template>
    </dom-repeat>

    <paper-tabs selected="{{selected}}" attr-for-selected="tab-name" fallback-selection="ui">
      <paper-tab tab-name="ui">Grid</paper-tab>
      <paper-tab tab-name="table">Table</paper-tab>
    </paper-tabs>
    <iron-pages selected="{{selected}}" attr-for-selected="tab-name" fallback-selection="ui" class="mainSection">
      <div tab-name="ui">        
        <dom-repeat items="{{employees}}">
          <template>    
            <div class="test">
            <div># [[index]]</div>
            <div>First name: <span>[[item.first]]</span></div>
            <div>Last name: <span>[[item.last]]</span></div>
            <div><img src="[[item.image]]" width="50px"></div>
            </div>    
         </template>
        </dom-repeat>

      </div>
      <div tab-name="table">
        Table
      </div>
    </iron-pages>


    </template>
  </dom-module>

删除了<dom-bind> 并更改了</dom-module> 正上方的第一个<template> 的结束标记。

JS：同上。

【讨论】：

抱歉回复晚了..谢谢它的工作..我最近在 SO..谢谢你的帮助:)