2017-07-30 27 views
0

内工作当我尝试包括纸质标签内的DOM重复,我越来越空白显示,而不是DOM重复值Polymer2.0 - DOM重复不是纸标签

DOM重复工作正常

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

回答

0

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>删除,改变了第一<template>的结束标记只是</dom-module>上方。

JS: 同上。

+0

对不起,最近的答复..感谢它的工作..我最近没有在这里没有活动..感谢您的帮助:) –