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通过将表示注释的对象传递给每个notes元素来显示其simple-note属性中的所有对象（不知道是否为notes-app}使元素互相交互的正确方法）。我希望按下function myFunc(arg1) { "log" ...按钮时发生这种情况。在这种情况下，如何将对象传递给元素属性？

Answer 1

由于您尝试将变量作为object传递，因此应使用属性绑定而不是属性绑定（仅支持字符串）。

Polymer data bindings需要使用大括号或方括号（{{twoWayBinding}}或[[oneWayBinding]]）。例如，要将foo元素的<x-child>属性设置为值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）并绑定到{{1其模板中的子属性。我认为note是另一个错字。

working demo

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

1 个答案: