2015-08-09 9 views
5

Mam prosty szablon renderujący obiekt tablicy. Jednak nie jest on z następującym komunikatem:Szablon-dom-repeat nie wyświetla tablicy z błędem "oczekiwana tablica dla elementów"

[dom-repeat::dom-repeat]: expected array for `items`, found [{"code":1,"name":"Item #1"},{"code":2,"name":"Item #2"},{"code":3,"name":"Item #3"}] 

Tablica jest przekazywana w atrybucie elementu niestandardowego w następującym formacie:

[{"code":1,"name":"Item #1"},{"code":2,"name":"Item #2"},{"code":3,"name":"Item #3"}] 

Czytałem docs on template repeaters kilka razy i nadal nie znajdź to, co robię źle.

Każda pomoc będzie bardzo ceniona!

Oto mój zwyczaj elementem:

<dom-module id="x-myelement"> 
    <template> 
     <div> 
      <h1>{{title}}</h1> 
      <ul> 
       <template is="dom-repeat" as="menuitem" items="{{items}}"> 
        <li><span>{{menuitem.code}}</span></li> 
       </template> 
      </ul>   
     </div> 
    </template> 
    <script> 
     (function() { 
      Polymer({ 
       is: 'x-myelement', 

       title: String, 

       items: { 
        type: Array, 
        notify: true, 
        value: function(){ return []; } 
       }   
      }); 
      })(); 
    </script> 
</dom-module> 

A oto teraz używam go:

<x-myelement title="Hello Polymer" 
      items='[{"code":1,"name":"Item #1"},{"code":2,"name":"Item #2"},{"code":3,"name":"Item #3"}]'> 
</x-myelement> 

Odpowiedz

4

Trzeba umieścić swoje właściwości elementu do obiektu properties (patrz Polymer documentation on properties):

Polymer({ 
    is: 'x-myelement', 
    properties: { 
    title: String, 
    items: { 
     type: Array, 
     notify: true, 
     value: function() {return [];} 
    } 
    } 
}); 

W przeciwnym razie Polymer nie ma informacji o twoim posiadaniu s. Traktował elementy jako łańcuch i nie parsował wartości atrybutu jako tablicy JSON. Ostatecznie dom-repeat został przekazany ciąg dla jego właściwości items, powodując błąd, który widziałeś.

+0

Dzięki stosom! W jakiś sposób wiedziałem, że to głupi błąd! Już działa :) –

Powiązane problemy