javascript - 将两个选择框值绑定(bind)到单个 knockout 日期属性

Question

我有一个 knockout 对象，其中包含一个名为created的属性。时间日期的此属性包含事件的日期。然后在我的 html 表单中，我有两个选择框输入:第一个用于小时，第二个用于分钟。这些允许用户选择时间，然后应在创建的属性上设置所选值。以下是我的表单的代码示例:

<form action="..." method="...">
    <select name="hours">
        <option value="8">8</option>
        <option value="9">9</option>
        ...
        <option value="22">22</option>
    </select>
    <select name="minutes">
        <option value="0">0</option>
        ...
        <option value="30">30</option>
    </select>

    ...
</form>

这是一个非常简单的形式，但是我不明白如何将输入绑定(bind)到创建的值并仅更新属于每个输入的日期部分。基本上，当我选择第一个输入的选项时，我应该更新日期的小时，当我选择第二个输入的选项时，应该更新日期的分钟。

Answer 1

我会通过添加 computed observable 来做到这一点混合并将选定的分钟和小时存储在其组成部分中。

这是一个稍微做作的示例，但显示了一般原理。这里的计算只是将小时和分钟部分连接在一起，但您可能会实例化一个 Date 对象来执行您需要执行的操作:

function TimeModel(options) {
    var self = this;

    self.hourOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    self.minuteOptions = [0, 15, 30, 45];

    self.selectedHour = ko.observable(options.hour || 0);
    self.selectedMinute = ko.observable(options.minute || 0);

    self.selectedDate = ko.computed(function() {
        return self.selectedHour() + ":" + self.selectedMinute();
    });
}

然后，我会将 hourOptions 和 minuteOptions 绑定(bind)到相应的选择框，一切都应该很好:)

检查这个 fiddle 是否有有效的解决方案:http://jsfiddle.net/WickyNilliams/ejjHp/