knockoutjs 日期时间字段更新不刷新模型视图答案

【问题标题】：knockoutjs date time field updating doesn't refresh model viewknockoutjs 日期时间字段更新不刷新模型视图
【发布时间】：2013-05-30 12:02:28
【问题描述】：

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

如何解决？

【问题讨论】：

你能发布你的 HTML 吗？您的浏览器 JavaScirpt 控制台中是否有任何错误？
控制台中没有错误。模型正在更新，然后我更改了 UI 上的一些数据，而不是来自 JS。这对我来说很奇怪
我不认为 value 绑定到 div 是合法的。
是的，但它正在工作:)

标签： javascript knockout.js

【解决方案1】：

在发现似乎没有很多出色的解决方案可以支持 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>'
});

如有任何问题，请告诉我

【讨论】：