将对象传递给聚合物2中的元素属性

Question

我正在使用Polymer2.0，我不知道如何将对象作为元素属性传递。

这是我的密码：

<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类型属性的元素。

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

如您所见，我希望note-app通过向每个simple-note元素传递一个表示注释的对象来显示其notes属性中的所有对象(不知道这是否是使元素相互交互的正确方式)。我希望当我按下notes-app按钮时会发生这种情况。在这种情况下，如何将对象传递给元素属性？

Answer 1

由于您试图将变量作为一个object传递，所以应该使用属性绑定而不是属性绑定(它只支持字符串)。

• 聚合物数据绑定需要卷曲或方括号({{twoWayBinding}}或[[oneWayBinding]])。例如，要将<x-child>元素的<x-child>属性设置为note的值，模板如下所示：
• 考虑到SimpleNote.is等于"simple-note"，我假设您对<note>和<dom-module id="note">的使用只是在您的问题中输入。它们应该设置为simple-note，作为元素名必须以小写ASCII字母开头，并且必须包含破折号。。
• 看起来您正在绑定一个recipe属性，但是<simple-note>声明了一个note属性(没有recipe)，并在其模板中绑定到note子属性。我认为recipe是另一个错误。

工作演示