Question

我使用自定义日期选择器（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();
    }
});

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

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

Answer 1

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

iron-input添加了反映值的绑定值属性属性，可用于双向数据绑定。 bind-value会通过用户输入或脚本更改通知。

See docs

目前您正在使用属性“inputValue”。这应该改为'价值'。

您的自定义元素需要：

在初始定义中设置value属性

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

聚合物（{ 是：“datepicker”

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

}）;

自定义元素中的Polymer IronFormElementBehavior

1 个答案: