不知道我哪里错了。绑定不起作用

这是我第一次尝试使用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

不知道我哪里错了。绑定不起作用

回答

相关问题