KO Data Binding Example

KO Data Binding Example

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js"></script>
<div>
    Anchor attribute :<span data-bind="text:googName"></span> <link data-bind="attr : {href:goog}"> <br/>
    Image attribute : <img data-bind="attr: {src:picSrc, alt:picAlt}"/>
    <hr/>
</div>

CSS

.pos{color: green;}
.neg{color: Red;}

JavaScript

$(document).ready(function() {
    var viewModel = function() {
        // Attribute Binding
        var goog = ko.observable("http://www.google.com");
        var googName = ko.observable("Google");
        var picSrc = ko.observable("https://lh4.googleusercontent.com/-UUguAMJ00ys/UHzRgDzjYmI/AAAAAAAACgE/5KJGtNxZ044/s128/US.gif");
        var picAlt = ko.observable("some pic");

        return {           
            goog: goog,
            googName: googName
        };
    }();

    ko.applyBindings(viewModel);
});