0

createdと呼ばれる単一のプロパティを含むノックアウトオブジェクトがあります。time Dateのこのプロパティには、イベントの日付が含まれています。次に、私のhtmlフォームには、2つの選択ボックス入力があります。1つ目は時間用で、2つ目は分用です。これらにより、ユーザーは時間を選択できます。選択した値は、作成したプロパティに設定する必要があります。以下は私のフォームのコードの例です:

<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>

これは本当に単純な形式ですが、その入力を作成された値にバインドし、各入力に属する日付の部分のみを更新する方法がわかりません。基本的に、最初の入力のオプションを選択すると、日付の時間が更新され、2番目の入力のオプションを選択すると、日付の分が更新されます。

4

1 に答える 1

3

これを行うには、計算されたオブザーバブルをミックスに追加し、選択した分と時間を構成部分に保存します。

これは少し不自然な例ですが、一般的な原則を示しています。ここで計算されるのは、時間と分の部分を連結するだけですが、おそらく、必要なことを行う代わりに 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/

于 2012-12-10T19:55:11.130 に答える