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

Question

我正在尝试将 value=".." 属性从 <input> 字段绑定到 JsViews observable，以便进行更改来自 JS 日期选择器的将被 JsView 框架检测到。

例子

在初始呈现时，数据链接 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

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

Bind value attribute from input field to JsViews Observables

javascript

datepicker

jsrender

jsviews

flatpickr

更新