javascript-如何使用帶有剔除的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綁定呢？ 這是更新的小提琴

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

Answer 2

加載腳本的順序一定是有問題的。 檢查您的控制台是否有錯誤。 您的代碼在這里工作jsfiddle.net/zA7L3/