Polymer 2.x iron-list插槽和數據綁定

有沒有人在熨斗列表中使用插槽有任何成功？Polymer 2.x iron-list插槽和數據綁定

我可以讓dom元素顯示在插槽中，但無法弄清楚如何執行數據綁定部分。我使用一些元素填充插槽，這些元素使用數據綁定來引用iron-list的item屬性。

例子：

組件與列表：

<dom-module id="component-with-list"> 
    <template> 
     <iron-list items="{{listData}}" as="item"> 
      <template> 
       <div> 
        <div>[[item.name]]</div> 
       </div> 
       <slot name="listitem"></slot> 
      </template> 
     </iron-list> 
    </template> 

    <script> 
     class ComponentWithList extends Polymer.Element { 

      static get is() { 
       return 'component-with-list' 
      } 

      static get properties() { 
       return { 
        listData: { 
         type: Array 
        } 
       } 
      } 

     } 
     customElements.define(ComponentWithList.is, ComponentWithList); 
    </script> 

</dom-module>

使用組件：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"> 
    </script> 
    <link rel="import" href="../../bower_components/polymer/polymer-element.html"> 
    <link rel="import" href="./component-with-list.html"> 
    <title>Iron-list with a slot with bindings</title> 
</head> 
<body> 
<dom-module id="main-document-element"> 
    <template> 
     <h1>Iron list with a slot that has data bindings</h1> 
    <component-with-list list-data="[[someData]]"> 
     <div slot="listitem">[[item.description]]</div> 
    </component-with-list> 
</template> 
<script> 
    HTMLImports.whenReady(function() { 
     class MainDocumentElement extends Polymer.Element { 

      static get is() { return 'main-document-element'; } 

      static get properties() { 
       return { 
        someData: { 
         type: Array, 
         notify: true, 
         value: function() { 
          return [ 
           { 
            name: "Item1", 
            description: "Item Number One" 
           }, 
           { 
            name: "Item2", 
            description: "Item Number Two" 
           } 
          ]; 
         } 
        } 
       } 
      } 

     } 
     window.customElements.define(MainDocumentElement.is, MainDocumentElement); 
    }); 
</script> 
</dom-module> 
<main-document-element></main-document-element> 
</body> 
</html>

來源

2017-10-09 Chris W

iron-list克隆<template>，你不能克隆<slot>。唯一的例外是使用<slot>作爲模板，像這樣：

<iron-list items="[[data]]"> 
    <slot></slot> 
</iron-list> 

<custom-element> 
    <template> 
     ... 
    </template> 
</custom-element>

來源

2017-10-09 20:06:26 Dracco

試試這個：

<dom-module id="component-with-list"> 
    <template> 
     <iron-list items="{{listData}}" as="item"> 
      <slot></slot> 
     </iron-list> 
    </template> 
    <script>...</script> 
</dom-module>

用法：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script> 
     <link rel="import" href="../../bower_components/polymer/polymer-element.html"> 
     <link rel="import" href="./component-with-list.html"> 
     <title>Iron-list with a slot with bindings</title> 
    </head> 
    <body> 
     <dom-module id="main-document-element"> 
      <template> 
       <h1>Iron list with a slot that has data bindings</h1> 
       <component-with-list list-data="[[someData]]"> 
        <div> 
         <div>[[listData.name]]</div> 
        </div> 
        <div>[[listData.description]]</div> 
       </component-with-list> 
      </template> 
      <script>...</script> 
     </dom-module> 
    </body> 
</html>

我覺得這個問題應該這樣來解決。

來源

2017-10-09 20:10:03 osa

Polymer 2.x iron-list插槽和數據綁定

回答

相關問題