javascript - 自定义元素中的 polymer IronFormElementBehavior

Question

我正在使用自定义日期选择器 ( https://github.com/bendavis78/paper-date-picker )。它工作正常，但我想做的是将其与纸质输入绑定(bind)，因此每当单击输入时，都会显示对话框。我通过创建自定义元素来实现这一点。我现在的问题是，我需要铁形式的这个元素，这样我就可以将日期与 ajax 请求一起发送。我发现我需要自定义元素来扩展 Polymer.IronFormElementBehavior，但我找不到任何有关如何实际执行此操作的文档。该示例只是将其放在常规输入元素上，因此那里没有有用的上下文。这是我尝试实现该行为的自定义元素:

<link rel="import" href="../../vendor/iron-form-element-behavior/iron-form-element-behavior.html">

<dom-module id="datepicker">

<template>
    <style>
    </style>

    <paper-input id="input" label="[[label]]" on-tap="openDatePicker" value="{{inputValue}}">
        <iron-icon icon="date-range" prefix></iron-icon>
    </paper-input>

    <paper-dialog id="datePickerDialog" class="paper-date-picker-dialog" name="dumb" modal on-iron-overlay-closed="_onDialogClosed">
        <paper-date-picker id="datePicker"></paper-date-picker>
        <div class="buttons">
            <paper-button dialog-dismiss>Cancel</paper-button>
            <paper-button dialog-confirm>OK</paper-button>
        </div>
    </paper-dialog>
</template>

</dom-module>

<script>
Polymer
({
    is: "datepicker"

    , behaviors:
    [
        Polymer.IronFormElementBehavior
    ]

    , properties:
    {}

    , ready: function ()
    {
        this.$.name = this.name;
    }

    // Custom functions //
    , _onDialogClosed: function(event)
    {
        if (event.detail.confirmed)
        {
            var date = new Date(this.$.datePicker.date);
            this.inputValue = moment(date).format("LL");
            this.$.value = this.inputValue;
        }
    }

    , openDatePicker: function()
    {
        this.$.datePickerDialog.open();
    }
});

不过，我无法在发布数据中显示日期值。该行为具有名称和值属性，我觉得我需要做的就是将它们与我的纸张输入联系起来，但这似乎没有任何作用。

有人真正成功地实现了这种行为吗？我错过了什么吗？

Answer 1

我也遇到了同样的问题。属性名称“value”很特殊。

iron-input adds the bind-value property that mirrors the value property, and can be used for two-way data binding. bind-value will notify if it is changed either by user input or by script.

See docs

当前您正在使用属性“inputValue”。应将其更改为“值”。

您的自定义元素需要:

• 在初始定义中设置value属性

• 将更改后的代码更新为 this.value 而不是 this.inputValue

  polymer ({ 是:“日期选择器”

  , behaviors:
  [
      Polymer.IronFormElementBehavior
  ]
  
  , properties:
  {
     value : {
        type: String,
        value: "Default value"
     }
  }
  
  , ready: function ()
  {
      this.$.name = this.name;
  }
  
  // Custom functions //
  , _onDialogClosed: function(event)
  {
      if (event.detail.confirmed)
      {
          var date = new Date(this.$.datePicker.date);
  
          // Update this to just "value"
          this.inputValue = moment(date).format("LL");
          this.$.value = this.inputValue;
  
      }
  }
  
  , openDatePicker: function()
  {
      this.$.datePickerDialog.open();
  }
  

  });