KO Highlight

by anup1986

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<div class="well" id="text" data-bind="text: someText"></div>
<div class="span4" id="pad">
    <span data-bind="highlight: someValue" id="pad">Some text</span>
    <div class="boxes" id="box2"></div>
    <div data-bind="highlight: someValue" class="boxes" id="box3"></div>
</div>
<div class="span4"> <a class="btn" data-bind="click: reloadModel">Click me!</a>

</div>

CSS

.boxes {
    margin-top: 10px;
    border-style: solid;
    width: 200px;
    height: 40px;
    background-color: gray;
}
#button {
    margin: 10px;
}

#pad {
    padding: 5px;
}

JavaScript

ko.bindingHandlers.highlight = {
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            var orgBgColor = $(element).css('backgroundColor');
            $(element).animate({
                backgroundColor: '#67cd32',
                borderWidth: '3px',
                borderColor: '#67cd32'
            }, 100, function () {
                $(element).animate({
                    backgroundColor: orgBgColor
                }, 600, function() {
                    value(false);
                });
            });
        }
    }
}

var viewModel = function () {
    var self = this;
    self.someValue = ko.observable(false);
    self.someText = ko.computed(function () {
        return self.someValue();
    });

    self.reloadModel = function () {
        self.someValue(true);
    };
};

ko.applyBindings(new viewModel());