Polymer 1.0：双向数据绑定：<iron-form> to/from Firebase

Question

我想将 iron-form 的字段值双向数据绑定到 Firebase 节点（代表用户定义的 settings，例如）。

settings.html

<dom-module id="my-settings">
  <template>
    <firebase-document location="[[firebaseUrl]]"
                       data="{{form}}">
    </firebase-document>
    <form is="iron-form" id="form">
      <paper-checkbox id="history"
                      name="history"
                      on-change="_computeForm"
                      >Save history
      </paper-checkbox>
      <!-- ... -->
      <!-- All types of form fields go here -->
      <!-- ... -->
    </form>
  </template>
  <script>
    (function() {
      Polymer({
        is: 'my-settings',
        _computeForm: function() {
          this.form = this.$.form.serialize();
        }
      });
    })();
  </script>
</dom-module>

此表格需要：

• 在发生变化时将其状态保存到 firebase（即，first-way 绑定——客户端到 firebase）和
• 在加载时将表单字段设置为其保存的值（即，second-way 绑定 — firebase 到客户端 — 完成 two-way绑定）。

问题

1. Please provide the best practice solution for accomplishing this.

2. Is it possible to bind the entire form (declaratively?) and avoid having to imperatively set each form field value independently upon load?

3. I encourage pseudocode or concepts that point me in the right direction.

Answer 1

iron-form 没有必要。您需要将 <firebase-document> 绑定到元素 属性（表示表单）并将表单字段值绑定到该 属性 的子属性。

Also, see this todo-list example.

settings.html

<dom-module id="my-settings">
  <template>
    <firebase-document location="[[firebaseUrl]]" data="{{form}}"></firebase-document>
    <paper-checkbox checked="{{form.history}}">Save history</paper-checkbox>
    <paper-input value="{{form.name}}" label="Name"></paper-input>
    <!-- Other form fields go here -->
  </template>
  <script>
    (function() {
      Polymer({
        is: 'my-settings',
        properties: {
          form: {
            type: Object,
            notify: true
          }
        }
      });
    })();
  </script>
</dom-module>