Knockoutjs的日期时间字段更新不会刷新模型视图

knockoutjs date time field updating doesn't refresh model view

本文关键字：刷新 模型 视图 更新 日期 时间 字段 Knockoutjs      更新时间：2023-09-26

我有模型映射主对象从JS

 function editor(model)
    {
        var self = this;        
        //....
        // other simple objects
    //....  
        self.bundleModel = ko.mapping.fromJS(model);
    }

另外，我有一些JS代码更新日期-时间字段，

viewModel.bundleModel.fromTime(timeFromField.get_selectedDate())

但是我看到我的数据在这种情况下没有在UI上更新。

<div class="days">
                    <!-- ko foreach: {data: editor.bundleModel.days, as: 'day'} -->
                    <div class="day_div" data-bind="value: day, html: viewModel.editor.dayCaption(day), css: viewModel.editor.dayActivator(day),click: viewModel.editor.selectDay">
                    </div>
                    <!-- /ko -->
                </div>

如何解决?

在发现似乎没有很多很棒的解决方案来支持KnockoutJS的日期/时间输入后，我发布了这个要点…https://gist.github.com/groovenectar/814703d1bc260859b8600e9d8a917b4d 

// Usage: <datetime params="id: 'any-unique-id', datetimeObservable: observableDateTimeObjectFromParentViewModel, default: defaultDateObject, min: new Date(), max: maxDateObject"></datetime>  
ko.components.register('datetime', {
    viewModel: function(params) {
        this.dateid = params.id + '-date';
        this.timeid = params.id + '-time';
        this.date = '';
        this.time = '';
        this.datetimeObservable = params.datetimeObservable;
        this.datetimeObservable.subscribe(function(datetime) {
            if (datetime === null) {
                return;
            }
            this.date = datetime.getFullYear() + '-' + ('00' + (datetime.getMonth() + 1)).slice(-2) + '-' + ('00' + datetime.getDate()).slice(-2)
            this.time = ('00' + datetime.getHours()).slice(-2) + ':' + ('00' + datetime.getMinutes()).slice(-2);
            dateElm = document.getElementById(this.dateid);
            timeElm = document.getElementById(this.timeid);
            if (
                dateElm && timeElm &&
                this.date.match(/'d{4}-'d{2}-'d{2}/) && this.time.match(/'d{2}:'d{2}/)
            ) {
                document.getElementById(this.dateid).value = this.date;
                document.getElementById(this.timeid).value = this.time;
            }
        }.bind(this));
        if (params.default) {
            this.datetimeObservable(params.default);
        }
        ['min', 'max'].forEach(function(minmax) {
            if (params[minmax]) {
                this[minmax] = params[minmax].getFullYear() + '-' + ('00' + (params[minmax].getMonth() + 1)).slice(-2) + '-' + ('00' + params[minmax].getDate()).slice(-2)
            } else { this[minmax] = ''; }
        });
        this.update = function(data, event) {
            dateElm = document.getElementById(this.dateid);
            timeElm = document.getElementById(this.timeid);
            if (
                dateElm.value && timeElm.value &&
                dateElm.value.match(/'d{4}-'d{2}-'d{2}/) && timeElm.value.match(/'d{2}:'d{2}/)
            ) {
                data.datetimeObservable(new Date(dateElm.value + 'T' + timeElm.value));
            } else {
                data.datetimeObservable(null);
            }
        }.bind(this);
    },
    template:
        '<div class="datetime-component"><div class="datetime-component-date">' +
        '<input type="date" data-bind="attr: {id: dateid, min: min, max: max}, value: date, event: {change: update}">' +
        '</div><div class="datetime-component-time">' +
        '<input type="time" data-bind="attr: {id: timeid}, value: time, event: {change: update}">' +
        '</div></div>'
});

如果有任何问题请告诉我

相关文章：