Passage d'un objet à l'attribut element dans Polymer 2

Question

Je joue avec Polymer 2.0, et je ne comprends pas comment passer un objet en tant qu'attribut d'élément.

Voici mon code:

<dom-module id="notes-app"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <button on-click="loadNotes">Get the notes</button> 
    <template is="dom-repeat" items="[[notes]]" as="note"> 
    <note recipe='JSON.stringify(note)'></note> 
    </template> 
</template> 
<script> 
    class NotesApp extends Polymer.Element { 
    static get is() { return 'notes-app'; } 
    static get properties() { 
     return { 
     notes: { 
      type: Array, 
      value: [] 
     } 
     }; 
    } 
    loadNotes() { 
     this.notes = [ 
     {"desc":"desc1", "author":"auth1", "type":"type1"}, 
     {"desc":"desc2", "author":"auth2", "type":"type2"}, 
     {"desc":"desc3", "author":"auth3", "type":"type3"} 
     ]; 
    } 
    } 
    window.customElements.define(NotesApp.is, NotesApp); 
</script> 
</dom-module> 

simple-note est l'élément qui a une propriété de type Object:

<dom-module id="note"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <div> 
     <fieldset> 
     <label>description</label>{{note.desc}}<br> 
     <label>author</label>{{note.author}}<br> 
     <label>type</label>{{note.type}} 
     </fieldset> 
    </div> 
    </template> 
    <script> 
    class SimpleNote extends Polymer.Element { 
     static get is() { return 'simple-note' } 
     static get properties() { 
     return { 
      note: { 
      type: Object, 
      value: {}, 
      notify: true 
      } 
     }; 
     } 
    } 
    customElements.define(SimpleNote.is, SimpleNote); 
    </script> 
</dom-module> 

Comme vous pouvez le voir, je veux note-app pour afficher tous les objets dans sa notes propriété en passant un objet représentant une note à chaque simple-note éléments (ne sait pas si c'est la bonne façon de faire interagir les éléments les uns avec les autres). Je veux que cela se produise quand j'appuie sur le bouton notes-app. Comment puis-je transmettre un objet à un attribut d'élément dans ce cas?

Answer 1

Puisque vous essayez de transmettre la variable sous la forme object, vous devez utiliser les liaisons de propriétés à la place des liaisons d'attributs (qui ne prennent en charge que les chaînes).

• Polymer data bindings nécessitent des accolades ou carrés ({{twoWayBinding}} ou [[oneWayBinding]]). Par exemple, pour définir la propriété foo de l'élément <x-child> à la valeur de note, le modèle ressemblerait à quelque chose comme ceci:

  <template is="dom-repeat" items="[[notes]]" as="note"> 
      <x-child foo="[[note]]"> 
  </template> 
  

• Étant donné que SimpleNote.is égal "simple-note", je suppose que votre utilisation de <note> et <dom-module id="note"> étaient seulement fautes de frappe dans votre question. Ils doivent être définis sur simple-note, sous le nom d'élément must start with a lowercase ASCII letter and must contain a dash.

• Il semble que vous lier une propriété recipe, mais <simple-note> déclare une propriété note (et non recipe) et se lie à note sous-propriétés dans son modèle. Je suppose recipe est une autre faute de frappe.

working demo