javascript - 如何使用带有 knockout 功能的 jquery ui 按钮？

Question

我有以下 html:

<button id="simpleBtn" data-bind="jqButton: true, click: runTest, style: {backgroundColor: color}">Click me</button>

以及以下模型:

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;
        }

        ko.bindingHandlers.jqButton = {
            init: function (element) {
                $(element).button();
            }
        }

        ko.applyBindings(Test('Name', function () {
            //test code
        }));

我想改变按钮的样式，但是这段代码不起作用。我应该怎么做才能让它发挥作用？

Answer 1

使用 css 绑定(bind)怎么样？ Here's an updated fiddle

<td><button id="testBtn" data-bind="jqButton: {enable: true}, click: runTest, css: StyleRunTest">Run test</button></td>

function applyKnockoutModel() {
    function Test(testName, test) {
        var vm = {};
        vm.StyleRunTest = ko.observable('btn-valid');
        vm.result = ko.observable(false);
        vm.testName = testName;
        vm.color = ko.computed(function () {
                return vm.result() === true ? vm.StyleRunTest('btn-valid') : vm.StyleRunTest('btn-invalid');
            };
        };
    };
};