javascript - 如何在 Knockout.js 中模型和 View 之间转换数据？

Question

我接手了一个严重依赖knockout.js数据绑定(bind)技术的项目。该应用程序的目的基本上是显示(体育)类(class)。必填内容包括类(class)名称和开始日期(和时间)。数据通过ajax拉取，然后通过knockout.js绑定(bind)到 View

基本上，有一个如下所示的模型:

BaseModel: function() {
    var self = this;

    var mappingOptions = {};
    self.setMappingOptions = function (options) {
        $.extend(mappingOptions, options);
    };
    self.map = function (data) {
        ko.mapping.fromJS(data, mappingOptions, self);
        return self;
    };

    self.isNew = function() {
        return !(typeof(self.id) == 'function' && self.id() != null);
    };
}

Course: function() {
    BaseModel.call(this);
    var self = this;

    ko.mapping.fromJS({
        name: null,
        date: moment().tz('UTC').minute(0).second(0).format('YYYY-MM-DDTHH:mm:ssZ'),
        timezone: null,
        duration: null
    }, {}, self);

    self.duration = ko.integerObservable();
    self.dateDateTime = new IMWeb.ko.DateTime(self.date);
    self.timezone = self.dateDateTime.timezone();
    self.dateDateTime.timezone.subscribe(function(timezone) {
        self.timezone = timezone;
    });
}

View 像这样绑定(bind)这个模型:

<input type="text" class="form-control" id="nameInput" data-bind="value: name"/>
<input type="text" class="form-control" id="dateInput" data-bind="value: clientDateDateTime.date, event:{focus: $parent.onDateInput, mouseover: $parent.onDateInput}, enable: changeable"/>
<input id="timeInput" type="text" class="form-control" data-bind="value: dateDateTime.time, event:{focus: $parent.onTimeInput, mouseover: $parent.onTimeInput}, enable: changeable">

从服务器发送的 json 数据中的日期设置为 UTC，因此我创建了以下函数以将其转换为客户端的时区:

/**
 * Converts the given UTC date to local date of the client by subtracting
 * the local timezone offset from the given date.
 *
 * @param {Date} utcDate The date object to convert
 * @returns {Date} The converted date object
 */
var UTC2LocalDate = function (utcDate) {
    var timestamp = utcDate.getTime();              // Number of miliseconds since Jan 1st 1970, 0:00:00 UTC
    var offset = (new Date()).getTimezoneOffset();  // Local client offset in minutes
    timestamp -= offset * 60 * 1000;                // Fix date with offset by converting offset minutes to miliseconds
    return new Date(timestamp);
};

现在，这是棘手的部分:如何运行这个“转换代码”而不过多干扰数据绑定(bind)机制？

基本上，我希望这种行为发生:

• 模型更改 -> 使用 UTC2LocalDate() 将模型中的日期转换为客户的本地时区并且 View 会更新(不更改模型的原始 UTC 值)。

• 用户更改 <input> 中的值-> 日期/时间转换为 UTC 并保存到模型中。

Answer 1

来回转换最好由 writable computed 处理。您将有一个 UTC 日期的普通可观察值，以及一个基于它计算的可写值。基本结构如下所示:

vm.utcDate = ko.observable();
vm.localDate = ko.computed({
  deferEvaluation: true,
  read: function () {
    return toLocalDate(vm.utcDate());
  },
  write: function (newLocalDate) {
    vm.utcDate(toUtcDate(newLocalDate));
  }
});

(显然，我将 toLocalDate 和 toUtcDate 的实现留给您。)在您想要的任何绑定(bind)中使用 localDate 变量显示和/或接受本地日期。当 utcDate 更新时，它会自动更改；当输入新的 localDate 值时，它会自动更改 utcDate。