Polymer 2の要素属性にオブジェクトを渡す

Question

Polymer 2.0を使用していますが、オブジェクトを要素属性として渡す方法がわかりません。

ここに私のコードです：あなたは、私がnote-appはそのnotesプロパティ内のすべてのオブジェクトを表示したい見ることができるように

<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> 

：

<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はタイプObjectの性質を持っている要素であり、ノートを表すオブジェクトをすべてsimple-note要素に渡すことによって（要素が相互作用する正しい方法であればわからない）私はnotes-appボタンを押すと起こりたい。この場合、どのようにオブジェクトを要素属性に渡すことができますか？

Answer 1

変数をobjectとして渡そうとしているので、（文字列のみをサポートする）属性バインディングの代わりにプロパティバインディングを使用する必要があります。

• Polymer data bindingsカールや角括弧（{{twoWayBinding}}又は[[oneWayBinding]]）を必要とします。たとえば、noteの値に<x-child>要素のfooプロパティを設定するには、テンプレートは次のようになります：

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

• はSimpleNote.isが"simple-note"等しいことを考えると、私は<note>の使用状況を想定し、<dom-module id="note">しかなかったですあなたの質問のタイプミス。要素名はmust start with a lowercase ASCII letter and must contain a dashで、simple-noteに設定する必要があります。

• それはあなたがrecipeプロパティを結合しているように見えますが、<simple-note>note財産（なしrecipe）を宣言し、そのテンプレートでnoteサブプロパティに結合します。私はrecipeが別のタイプミスであると仮定します。

working demo