綁定兩個selectboxes值單淘汰賽日期屬性

我有一個包含名爲單一屬性創建淘汰賽對象。時間日期屬性包含事件的日期。然後在我的html表單中，我有兩個選擇框輸入：第一個是小時，第二個是分鐘。這些允許用戶選擇時間，然後應該在創建的屬性上設置選定的值。以下是我的形式的代碼示例：綁定兩個selectboxes值單淘汰賽日期屬性

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

這是一個非常簡單的形式，但我不明白，我能怎麼說輸入綁定到創造價值並更新只屬於日期部分到每個輸入。基本上，當我選擇第一個輸入的選項時，我應該更新日期的小時，當我選擇第二個輸入的選項時，應該更新日期的分鐘。

來源

2012-12-10 Stefano

我會通過增加computed observable進入混合做到這一點，存儲選定分鐘和小時在他們的組成部分。

這裏有一個稍微人爲的例子，但示出的一般原理。這裏的計算是簡單的串聯小時的分部分組合在一起，但據推測你將實例化一個日期對象，而不是做你需要做的事情：

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-10 19:55:11 WickyNilliams

我喜歡你的解決方案，但寫在這個問題我有alredy存儲日期的屬性，我必須設定小時/分鐘它。我雖然我可以以某種方式有可觀察的綁定到Date對象的setter方法。所以，我應該設置selectboxes到時間價值的價值，然後反映任何更改到財產 – Stefano

如果你能寫一個的jsfiddle您更容易得到準確的答案，因爲人們沒有提煉從普通的要求文本，它在那裏讓他們看到。編輯：另外，我認爲你應該擴大我上面概述的方法，單獨存儲日期的每個部分，並使用計算來計算一個全新的日期，每次它的一部分發生變化（調用'setMinutes'沒有真正的區別等等，而不是每次都新建一個'Date'） – WickyNilliams

這與我的一個應用程序（包括0,15,30,45）中的代碼幾乎相同。當selectedDate觸發時，更新要發送回服務器的實際日期字段。 –

綁定兩個selectboxes值單淘汰賽日期屬性

回答

相關問題