聚合物1.0:双向数据绑定:<铁-形式>.往返Firebase [英] Polymer 1.0: Two-way data binding: <iron-form> to/from Firebase

问题描述

我想通过双向方式将iron-form的字段值绑定到Firebase节点(例如，代表用户定义的 设置 ).

I want to two-way databind the field values of an iron-form to a Firebase node (representing user-defined settings, for example).

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

此表格需要:

• 根据更改(即 first-way 绑定-客户端到firebase)将其状态保持为Firebase，并且
• 在加载时将表单字段设置为其保存的值(即 second-way 绑定-将Firebase绑定到客户端-完成双向绑定).

• persist its state to firebase upon changes (i.e., first-way binding — client to firebase) and
• set form fields to their saved values upon loading (i.e., second-way binding — firebase to client — completing the two-way binding).

1. 请为此提供最佳实践解决方案.

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

是否可以绑定整个表单( 声明性地 ?)，而不必强制性地 >在加载时独立设置每个表单字段值?

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

我鼓励使用伪代码或指向我正确方向的概念.

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

推荐答案

iron-form不是必需的.您需要将<firebase-document>绑定到元素属性(代表表单)，并将表单字段值绑定到该属性的子属性.

iron-form is not necessary. You need to bind a <firebase-document> to an element property (representing the form) and bind the form field values to that property's sub-properties.

此外，请参阅此待办事项列表示例.

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

这篇关于聚合物1.0:双向数据绑定:<铁-形式>.往返Firebase的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！