将两个选择框值绑定到单个剔除日期属性

Question

我有一个淘汰对象，其中包含一个名为 created 的属性。 time Date 的这个属性包含事件的日期。然后在我的 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>

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

Answer 1

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

这是一个稍微做作的例子，但显示了一般原则。这里的计算只是将小时和分钟部分连接在一起，但可能 you 会实例化一个 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 绑定到相应的选择框，一切都应该很好:)

检查这个小提琴以获得有效的解决方案：http://jsfiddle.net/WickyNilliams/ejjHp/