如何將數據從主機元素傳遞到子元素

Question

無法讓我的數據跨元素工作。假設我在主機元素中有一個對象「記錄」。它可以在那個元素中使用沒有問題。但是當我試圖將視圖分解成單獨的元素時，它不再有效。

下面是一個示例代碼片段。 .template部分工作正常，但我無法複製子元素.my-list中的功能。當我嘗試時，沒有任何反應。

<dom-module id="host-element"> 
    ... 
    <template is="dom-repeat" items="{{records}}"> 
     <p>{{item.userName}} - {{item.number}}</p> 
    </template> 

    <my-list></my-list>  

    <script> 
    Polymer({ 
     is: 'host-element', 
     ready: function() { 
     this.records = [ 
      {userName: 'Bob'}, 
      {userName: 'Sally'} 
     ]; 
     } 
    }); 
    </script> 

</dom-module> 

如果我嘗試簡單地採用當前的.template代碼並將其放入.my-list，它不起作用。

我假設我需要將數據綁定到子元素，但我無法弄清楚這一點。將一個：record =「{{}}}」添加到標記中，然後在子元素中使用它不起作用。

想象一下，這很簡單，只是在文檔中找不到答案。

Answer 1

重要的是，每個元素的頂級template是一個普通的模板（不is="dom-repeat"或其他專門化），否則，它應該是簡單的：

<link rel="import" href="//polygit.org/components/polymer/polymer.html"> 
 

 
<i>(Requires Chrome)</i> 
 

 
<host-element></host-element> 
 

 
<dom-module id="my-list"> 
 
    <template> 
 
    <template is="dom-repeat" items="{{records}}"> 
 
     <p>{{item.userName}} - {{item.number}}</p> 
 
    </template> 
 
    </template> 
 
    <script> 
 
    Polymer({ 
 
     is: 'my-list' 
 
    }); 
 
    </script> 
 
</dom-module> 
 

 
<dom-module id="host-element"> 
 
    <template> 
 
    <my-list records="{{records}}"></my-list> 
 
    </template> 
 
    <script> 
 
    Polymer({ 
 
     is: 'host-element', 
 
     ready: function() { 
 
     this.records = [{userName: 'Bob'}, {userName: 'Sally'}]; 
 
     } 
 
    }); 
 
    </script> 
 
</dom-module>