javascript - knockout 无法观察到样式属性

Question

全部!我有以下 HTML:

  <table>
        <thead>
            <tr>
                <th>Simple app</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: tests">
            <tr>
                <td data-bind="text: testName"></td>
                <td data-bind="text: result"></td>
                <td><button data-bind="click: runTest, style: {backgroundColor: color}">Run test</button></td>
            </tr>
        </tbody>
    </table>

以及以下js:

function Test(testName, test) {
    var vm = {};

    vm.result = ko.observable(false);
    vm.testName = testName;
    vm.color = ko.computed(function (){
        return vm.result === true ? 'green' : 'red';
    }, vm);

    vm.test = test;
    vm.runTest = function () {
        var result = vm.test();
        vm.result(result);
    }

    return vm;
}

function TestsViewModel(modelName, tests) {
    var vm = {};

    vm.modelName = modelName;
    vm.tests = [];

    for(var i = 0; i < tests.length; i++){
        vm.tests.push(Test(tests[i].title, tests[i].test));
    }

    return vm;
}

function test1() {
    return true;
}

function test2(){
    return false;
}

function test3(){
    return void (0) === undefined;
}

ko.applyBindings(TestsViewModel('Name', [{
    title: 'Test1',
    test: test1
}, {
    title: 'Test2',
    test: test2
}, {
    title: 'Test3',
    test: test3
}]));

我想根据结果属性的值更改按钮的颜色。但 knockout 不会检查结果更改时的值。有什么问题吗？

Answer 1

你错过了括号:

vm.color = ko.computed(function (){
    return vm.result() === true ? 'green' : 'red'; // vm.result()
}, vm);