自定义元素中的聚合物 IronFormElementBehavior

Polymer IronFormElementBehavior in custom element

本文关键字：聚合物 IronFormElementBehavior 元素 自定义      更新时间：2023-09-26

我正在使用自定义日期选择器（https://github.com/bendavis78/paper-date-picker）。它工作正常，但我想做的是将其绑定到纸质输入，因此每当单击输入时，对话框都会显示。我通过创建自定义元素来做到这一点。我现在的问题是，我需要铁形式的这个元素，所以我可以将日期与 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();
    }
});

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

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

我遇到了同样的问题。属性名称"值"是特殊的。

铁输入添加镜像值的绑定值属性 属性，并可用于双向数据绑定。绑定值将 如果通过用户输入或脚本更改它，则通知它。

查看文档

当前您正在使用属性"输入值"。这应该更改为"值"。

您的自定义元素需要：

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

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

    聚合体({ 是："日期选择器"

    , 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();
}

    }）;

相关文章：