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

时间:2014-02-24 13:07:46

标签: checkbox knockout.js binding

这是我第一次尝试使用Knockout。我已经阅读了教程,但我发现它错了

  • 我有星期几的静态值
  • 对于每一天,都要选择一个时间范围/时间段(例如从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>

非常感谢任何帮助!

2 个答案:

答案 0 :(得分:1)

您可能应该将复选框值绑定到enabled对象当天的BusinessHourItem属性,然后将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/找到它。

答案 1 :(得分:0)

您的dateRangeDetails函数不存在,但如果您想使用对象具有ur检查值,则可以使用CheckedValue绑定。

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

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