Editable Fields (detailed)

by stevegreatrex

HTML

<script src="https://github.com/stevegreatrex/JsUtils/raw/master/JsUtils/utils.min.js"></script>
<h1 data-bind="text: field, visible: !field.isEditing()"></h1>

<form data-bind="submit: field.endEdit, visible: field.isEditing">
<input data-bind="value: field" />
</form>
<a href="#" data-bind="visible: !field.isEditing(), click: field.beginEdit">Rename</a>
<div data-bind="visible: field.isEditing">
<a href="#" data-bind="click: field.endEdit">Confirm</a> <span>|</span> <a href="#" data-bind="click: field.cancelEdit">Cancel</a>
</div>

CSS

body { background: #111;  font-family: 'Courier New'; padding: 15px; }
h1 { color: #eee; font-size: 36pt; font-weight: bold;  }
input { font-size: 36pt; font-weight: bold; font-family: 'Courier New'; }
    
a, span { color: #FFFF66; }

JavaScript

var ViewModel = function() {
    this.field = ko.editable("the title");
};
ko.applyBindings(new ViewModel());