Question

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

非常感谢任何帮助！

Answer 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/找到它。

Answer 2

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

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

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

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

2 个答案: