模板自動綁定時出現聚合物錯誤

Question

我正嘗試使用聚合物的core-list擴展名。 我使用例如由谷歌開發者從This YT Link

我is="auto-binding"值添加到我的模板，我去錯誤：

Uncaught TypeError: Cannot set property 'data' of null 

我也想設置height: 100%到core-list，它也沒有工作，我得到了警告：

core-list must either be sized or be inside an overflow:auto div that is sized 

在下面，我將我的代碼：

<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html"> 
<link rel="import" href="../bower_components/core-list/core-list.html"> 
<link rel="import" href="../bower_components/core-pages/core-pages.html"> 
<link rel="import" href="../bower_components/core-ajax/core-ajax.html"> 
<!--{{hash}--> 
<polymer-element name="progress-page" attributes="hash"> 
    <template> 
        <template is="auto-binding" id="app" style=" height:100%; overflow: auto;"> 
         <core-list data="{{data}}" flex style=" height:100%;"> 
          <template> 
           <div class="row" layout horizontal center> 
            <div data-index="{{index}}">{{model.name}}</div> 
           </div> 
          </template> 
         </core-list> 
        </template> 

</template> 

    <script> 
     Polymer('progress-page', { 
      ready: function() { 
       this.selected = 0; 
       var app = document.querySelector('#app'); 
       app.data = generateContacts(); 

       function generateContacts() { 
        var data = []; 
        for (var i = 0; i < 1000; i++) { 
         data.push({ 
          name: 'dddd', 
          string: 'asd' 
         }); 
        } 
        return data; 
       } 
      } 
     }); 

    </script> 
</polymer-element> 

凸輪有人請告訴我什麼是錯？這是我添加的鏈接的1：1版本。

Answer 1

您不應該在裏面使用template is="auto-binding"a聚合物元素。自動綁定模板的全部要點是，它允許您在之外設置聚合物元素的數據綁定。

所以你在這裏結合了兩個概念。這兩條線是你會在你的主頁使用，如果你使用一個自動綁定模板：

var app = document.querySelector('#app'); 
app.data = generateContacts(); 

在這裏，我們試圖檢索到自動綁定模板的引用，並添加一個數據屬性到它。

這不適用於您的情況。 '#app'在<progress-page>的shadow DOM中，所以document.querySelector不會找到它。

這條線，在另一方面，添加一個屬性到<progress-page>元素，這是做，如果你正在使用的核心列表中的元素裏面的正確的事情：

this.selected = 0; 

所以，如果你想要使用自動綁定模板，消除Polymer元素並使用第一種方法（querySelector並分配app.data，app.selected）。

如果你想創建一個聚合物元件，消除自動綁定模板和使用第二種方法：

this.data = generateContacts(); 
this.selected = 0; 

這裏的這段代碼與自動綁定模板的工作版本中刪除：

http://jsbin.com/lofega/2/edit