ActionButton.ts

class ActionButton {
    Title = ko.observable<string>();
    OriginalTitle: string;
    WorkingTitle = ko.observable<string>("Loading...");
    FailedTitle = ko.observable<string>("Failure!");
    SuccessTitle = ko.observable<string>("Success!");
    private IsIdle = ko.observable<boolean>(true);
    SetIdle = () => {
        this.IsWorking(false);
        this.IsIdle(true);
        this.IsSuccess(false);
        this.IsFail(false);
    }
    private IsWorking = ko.observable<boolean>(false);
    SetWorking = () => {
        this.Title(this.WorkingTitle());
        this.IsWorking(true);
        this.IsIdle(false);
        this.IsSuccess(false);
        this.IsFail(false);
    }
    private IsSuccess = ko.observable<boolean>(false);
    SetSuccess = () => {
        this.Title(this.SuccessTitle());
        this.IsWorking(false);
        this.IsIdle(false);
        this.IsSuccess(true);
        this.IsFail(false);
        this.Reset();
    }
    private IsFail = ko.observable<boolean>(false);
    SetFail = () => {
        this.Title(this.FailedTitle());
        this.IsWorking(false);
        this.IsIdle(false);
        this.IsSuccess(false);
        this.IsFail(true);
        this.Reset();
    }
    Reset = () => {
        var x = this;
        setTimeout(function () {
            x.SetIdle();
            x.Title(x.OriginalTitle);
        }, 3000);
    }
    State = ko.computed(() => {
        if (this.IsIdle() || this.IsWorking()) {
            return 'btn-primary';
        } else if (this.IsSuccess()) {
            return 'btn-success';
        } else if (this.IsFail()) {
            return 'btn-danger';
        }
    });
    Glyph = ko.computed(() => {
        if (this.IsIdle()) {
            return '';
        } else if (this.IsWorking()) {
            return 'glyphicon-refresh';
        } else if (this.IsSuccess()) {
            return 'glyphicon-ok';
        } else if (this.IsFail()) {
            return 'glyphicon-remove';
        }
    });
    WorkMethod = ko.observable<() => void>();
    constructor(title: string = "Action Button") {
        this.Title(title);
        this.OriginalTitle = this.Title();
    }
}
interface KnockoutBindingHandlers {
    actionButton: KnockoutBindingHandler;
}
ko.bindingHandlers.actionButton = {
    init: function (element, valueAccessor, allBindingsAccessor, data, context) {
        var value = valueAccessor();
        if (typeof value === 'object') {
            throw (`${value.Title()} binding must be a string.`);
        }
        var options = allBindingsAccessor().abOptions || {};
        $(element).attr('type', 'submit');
        $(element).addClass('btn');
        $(element).append(`<span data-bind="text: ${value}.Title()"></span>&nbsp;`);
        $(element).append(`<span class="glyphicon" data-bind="css: ${value}.Glyph()"></span>`);
        data[value].Title(options.Title || data[value].Title());
        ko.applyBindingsToNode(element, { css: data[value].State(), click: data[value].WorkMethod() });
    },
    update: function (element, valueAccessor, allBindingsAccessor, data, context) {
        var value = valueAccessor();
        ko.applyBindingsToNode(element, { css: data[value].State(), click: data[value].WorkMethod() });
    }
};