Editable Fields (simple)

by stevegreatrex

HTML

<script src="https://github.com/stevegreatrex/JsUtils/raw/master/JsUtils/utils.min.js"></script>
<input data-bind="value: field, enable: field.isEditing" />
<br/>
<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>

JavaScript

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