javascript - 将输入字段的值属性绑定到 JsViews Observables

Question

我正在尝试将-field 中的value=".."-attribute绑定到JsViews observable，以便 JsView 框架检测到从 JS datepicker 所做的更改。<input>

例子

在初始渲染时，数据链接的observedDate参数显示在<input>-field 中：

<input class="flatpickr-calendar" type="text" data-link="observedDate">

然后，使用flatpickr javascript 工具选择新日期，新日期将存储在value=".."-field 中：

<input class="flatpickr-calendar" type="text" data-link="observedDate" value="2017-05-09">

问题

现在，observedDate处理的日期和value属性之间存在差异：

JsViews 没有检测到 value-attribute 的变化。

---

有人对如何处理这种情况有一些建议吗？谢谢。

Answer 1

您需要一个事件onChange update value observedDate。

例如，您可以这样做：

$(".flatpickr").flatpickr({
    onChange: function(selectedDates, dateStr, instance) {
        $.observable($.view(this.input).data).setProperty("observedDate", dateStr);
    },
});

完整代码。

更新

或者您可以创建自定义标签：

$.views.tags({
    flatpickr: {
        template: "<input/>",
        onUpdate: false,
        dataBoundOnly: true,

        flatpickr: null,
        isChange: false,
        changeEvent: function (selectedDates, dateStr, instance) {
            this.isChange = true;
            this.update(dateStr);
            this.isChange = false;
        },

        onDispose: function () {
            if (this.flatpickr) {
                this.flatpickr.destroy();
            }
        },

        onAfterLink: function (tagCtx, linkCtx) {
            var tag = this;
            var props = tagCtx.props;
            var options = {
                defaultDate: tagCtx.args[0]
            };

            if (tag._.unlinked) {
                if (!tag.linkedElem) {
                    tag.linkedElem = tag._.inline ? tag.contents("*").first() : $(linkCtx.elem);
                }
                $.each(props, function (key, prop) {
                    var option;
                    if (key.charAt(0) === "_") {
                        key = key.slice(1);
                        options[key] = prop;
                    }
                });

                options.onChange = $.proxy(tag.changeEvent, tag);
                this.flatpickr = tag.linkedElem.flatpickr(options);
            } else {
                if (!this.isChange) {
                    this.flatpickr.setDate(options.defaultDate)
                }
            }
        }

    }
});

并使用：

{^{flatpickr observedDate /}}

完整代码

支持 flatpickr选项：

{^{flatpickr observedDate _inline=true _maxDate='2018-05-01' _minDate='2017-05-01'/}}

完整代码