0

我有从 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>

如何解决这个问题？

4

1 回答 1

0

在发现似乎没有很多很好的解决方案可以使用 KnockoutJS 支持日期/时间输入后，我发布了这个 Gist ... 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>'
});

请让我知道有关它的任何问题

于 2021-06-27T23:12:16.260 回答