不知道我哪裏錯了。綁定不起作用

這是我第一次嘗試使用Knockout。我已閱讀教程，但我只是犯錯不知道我哪裏錯了。綁定不起作用

我這一週
對於這些天的日子靜態值，時間範圍/週期被selectd（例如，從0800到1700） - textfields
對於這些日子中的每一天都有一個複選框，包括或排除該日期。如果未選中，該行是取消禁用

因此，它是由行與

日表|從時間|到時間|選擇

我嘗試：

視圖模型

//Generic class that will be contain each row item 
var BusinessHourItem = function (day, fromTime,toTime, enabled) { 
    var self = this; 
    self.day = day; 
    self.fromTime = ko.observable(fromTime); 
    self.toTime = ko.observable(toTime); 
    self.enabled = ko.observable(enabled); 
}; 

//Actual View Model 
var BusinessHoursViewModel = function() { 
    var self = this; 

    //Range Table 
    self.dayTimeRangeTableItems = [ 
     new BusinessHourItem('MON', '00:00', '00:00', false), 
     new BusinessHourItem('TUE', '00:00', '00:00', false), 
     new BusinessHourItem('WED', '00:00', '00:00', false), 
     new BusinessHourItem('THU', '00:00', '00:00', false), 
     new BusinessHourItem('FRI', '00:00', '00:00', false), 
     new BusinessHourItem('SAT', '00:00', '00:00', false), 
     new BusinessHourItem('SUN', '00:00', '00:00', false) 
    ]; 

    self.selectedItems = ko.observableArray(); 

    self.selectedItemsDelimited = ko.dependentObservable(function() { 
     return self.selectedItems().join(","); 
    }); 
}; 

ko.applyBindings(new BusinessHoursViewModel());

HTML

<h2>Selected Business Hours(<span data-bind="text: dateRangeDetails()"></span>)</h2> 

<table> 
    <thead> 
     <tr> 
      <th>Day</th><th>From</th><th>To</th><th>Select</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: dayTimeRangeTableItems"> 
     <tr> 
      <td><input data-bind="value: day" /></td> 
      <td><input data-bind="value: fromTime" /></td> 
      <td><input data-bind="value: toTime" /></td> 
      <td><input type="checkbox" data-bind="atrr: {value: $data}, checked: $parent.selectedItems" /></td> 
     </tr>  
    </tbody> 
</table>

任何幫助將非常感激！

來源

2014-02-24 user919426

你的dateRangeDetails函數不存在，但如果你想使用一個對象有你的檢查值，你可以使用CheckedValue綁定。

<input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedItems" />

小提琴：http://jsfiddle.net/RapTorS/rwefL/

來源

2014-02-24 13:23:35

感謝猛龍。我更喜歡你的，因爲你並沒有改變我的許多代碼。 – user919426

對不起，在最後一點我的意思是禁用輸入元素時，相應的行未選中。 – user919426

我更新小提琴：http://jsfiddle.net/RapTorS/rwefL/4/ 複選框綁定到啓用observables和selectedItemsDelimited做過濾器。 –

你應該複選框值可能綁定到BusinessHourItem對象中一天的enabled屬性，然後從一種觀察的陣列改變selectedItems到作爲一個計算觀察到類似如下：

self.selectedItems = ko.computed(function(){ 
    return self.dayTimeRangeTableItems.filter(function(item){ 
     return item.enabled(); 
    }); 
});

你有也將h2綁定到不存在的稱爲dateRangeDetails的屬性。我想這只是一個錯誤，在這裏提供樣本，並且它應該綁定到selectedItemsDelimited。順便提一下，selectedItemsDelimited應該可能會得到天的名稱或對象的其他字符串表示形式，以確保它不會顯示爲[object, object]或類似形式。

我使用你的代碼創建了一個小提琴，並進行必要的小改動以使其在http://jsfiddle.net/tR9HH/處找到。

來源

2014-02-24 13:23:21

感謝那些曾 – user919426

不知道我哪裏錯了。綁定不起作用

回答

相關問題