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

Question

我正在尝试绑定(bind) value=".." -来自 <input> 的属性-字段到 JsViews 可观察，这样 JsView 框架就会检测到 JS 日期选择器所做的更改。

示例

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

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

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

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

问题

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

JsViews 未检测到值属性的更改。

<小时/>

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

Answer 1

您需要一个事件 onChange更新值observedDate。

例如，您可以这样做:

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

full code .

更新

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

$.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 /}}

full code

支持Flatpickr options :

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

full code