淘汰赛-根据表格中的选择列表显示复选框

时间:2018-07-19 14:11:19

标签: knockout.js computed-observable

我正在尝试根据表中每一行的选择列表选择显示/隐藏复选框。选择列表选项正确显示,但更改选项值后,计算的函数未更新复选框的可见性。 下面是我的代码...你们能告诉我我做错了吗。

http://jsfiddle.net/euh926a7/10/

<table width="95%" cellspacing="0" >
                <thead>
                    <tr class="freeze">
                        <th> Employee ID </th>
                        <th> Full Name </th>
                        <th> Leap Leader </th>
                    </tr>
                <tbody data-bind='foreach: staffLists'>
                    <tr>
                        <td data-bind="text: employeeId"></td>
                        <td><select data-bind="options: $parent.positionOptions, optionsText: 'text', optionsValue: 'value', value: position, optionsCaption: 'Select one...',optionsAfterRender: $parent.setOptionDisable"></select></td>
                        <td><input type="checkbox" data-bind="checked : leapLeader, visible : showleap" /></td>
                    </tr>
                </tbody>
            </table>

下面是我的js

var scLogic = new Array([]);
scLogic.test1 = [false, false, false, ''];
scLogic.test2 = [true, true, true, 'logic'];

function viewModel(){
var self = this;
self.staffLists = ko.observableArray([]);
for(var i=0; i<2;i++)
        self.staffLists.push(new staffModel(i));
self.positionOptions = new Array(
    { value: 'test1', text: 'Testing 1', disable: false},
    { value: '', text: '--- Test 2 ---', disable: true},
    { value: 'test2', text: 'Testing 2', disable: false}
);
self.setOptionDisable = function(option, item) {
    if (!item) return;
    ko.applyBindingsToNode(option, {
        disable: item.disable
    }, item);
};
}

ko.applyBindings(new viewModel());

function  staffModel(i){
var self = this;
self.recordId = 'rec' + i;
self.employeeId = 'emp' + i;
self.position = ko.observable('test' + i);
self.leapLeader = ko.observable(false);
self.showleap = ko.computed(function() {
    return scLogic[self.position] === undefined ? false : 
scLogic[self.position][0];
});
}

1 个答案:

答案 0 :(得分:0)

谢谢你!

您的return语句中有一个错字:[self.postion]。我还认为,由于这是一种可观察的方法,因此应调用它:[self.position()]以获取其值– msokrates