将两个选择框值绑定到单个挖空日期属性

时间:2012-12-10 19:23:47

标签: javascript html binding knockout.js

我有一个敲除对象,其中包含一个名为 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>

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

1 个答案:

答案 0 :(得分:3)

我会通过在混合中添加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();
    });
}

然后我会将hourOptionsminuteOptions绑定到相应的选择框,所有这些都应该很好:)

检查这个小提琴是否有效:http://jsfiddle.net/WickyNilliams/ejjHp/