将对象传递给 Polymer 2 中的元素属性

Question

我正在玩 Polymer 2.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 传递，因此您应该使用属性绑定而不是属性绑定（仅支持字符串）。

Polymer data bindings 需要大括号或方括号（{{twoWayBinding}} 或 [[oneWayBinding]]）。例如，要将 <x-child> 元素的 foo 属性设置为 note 的值，模板将如下所示：
```
<template is="dom-repeat" items="[[notes]]" as="note">
  <x-child foo="[[note]]">
</template>
```
鉴于 SimpleNote.is 等于 "simple-note"，我假设您对 <note> 和 <dom-module id="note"> 的使用只是您问题中的拼写错误。它们应该设置为 simple-note，作为元素名称 must start with a lowercase ASCII letter and must contain a dash.
看起来你正在绑定一个 recipe 属性，但是 <simple-note> 声明了一个 note 属性（并且没有recipe) 并绑定到其模板中的 note 子属性。我假设 recipe 是另一个错字。

working demo

将对象传递给 Polymer 2 中的元素属性

Passing an object to element attribute in Polymer 2

javascript

polymer

polymer-2.x