forms - polymer 1.0 : Two-way data binding: <iron-form> to/from Firebase

Question

我想要将 iron-form 的字段值双向数据绑定(bind)到 Firebase 节点(表示用户定义的设置，例如)。

设置.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(即第一路绑定(bind) - 客户端到 Firebase)以及
• 在加载时将表单字段设置为其保存的值(即，第二种绑定(bind) - firebase 到客户端 - 完成双向绑定(bind))。

问题

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没有必要。您需要绑定(bind)一个<firebase-document>到元素属性(代表表单)并将表单字段值绑定(bind)到该属性的子属性。

Also, see this todo-list example .

设置.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>