Knockoutjs.com - Hello World Example

http://knockoutjs.com/examples/helloWorld.html

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class='liveExample' data-bind="event: {mouseover: triggerIcon}">   
    <!-- ko if: showIcon -->
    <a class="card-delete-button"><i class="icon-trash"></i></a>
    <!-- /ko -->
</div>

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

JavaScript

// Here's my data model
var ViewModel = function(first, last) {
    var self = this;
    self.showIcon = ko.observable(false);
    self.triggerIcon = function () {
        self.showIcon(true);
    }; 
    
    
};
 $('.card-delete-button').tooltip({
            'placement': 'top',
            'title': 'Text'
        });
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work