<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/knockout-3.3.0.js"></script> <script type="text/javascript"> function PersonViewModel(name) { // Data this.name = ko.observable(name); this.editing = ko.observable(false); // Behaviors this.edit = function () { this.editing(true) } } $(function () { ko.applyBindings(new PersonViewModel("Bert Bertington")); }) </script> </head> <body> <p> Name: <b data-bind="visible: !editing(), text: name, click: edit"> </b> <input data-bind="visible: editing, value: name, hasFocus: editing" /> </p> <p><em>Click the name to edit it; click elsewhere to apply changes.</em></p> </body>