//control visibility, give element focus, and select the contents (in order) ko.bindingHandlers.visibleAndSelect = { update:function (element, valueAccessor) { ko.bindingHandlers.visible.update(element, valueAccessor); if (valueAccessor()) { setTimeout(function () { $(element).find("input").focus().select(); }, 0); //new tasks are not in DOM yet } } }; var Task = function (name) { this.name = ko.observable(name); } var ViewModel = function () { var self = this; self.highPriorityTasks = ko.observableArray([ new Task("Get dog food"), new Task("Mow lawn"), new Task("Fix car") ]); self.highPriorityTasks.id = "high"; self.normalPriorityTasks = ko.observableArray([ new Task("Fix fence"), new Task("Walk dog"), new Task("Read book") ]); self.normalPriorityTasks.id = "normal"; self.selectedTask = ko.observable(); self.clearTask = function(data, event) { if (data === self.selectedTask()) { self.selectedTask(null); } if (data.name() === "") { self.highPriorityTasks.remove(data); self.normalPriorityTasks.remove(data); } }; self.isTaskSelected = function(task) { return task === self.selectedTask(); }; self.addTask = function () { var task = new Task("new"); self.selectedTask(task); self.normalPriorityTasks.push(task); }; self.trash = ko.observableArray([]); self.trash.id = "trash"; self.myDropCallback = function (arg) { if (console) { console.log("Moved '" + arg.item.name() + "' from " + arg.sourceParent.id + " (index: " + arg.sourceIndex + ") to " + arg.targetParent.id + " (index " + arg.targetIndex + ")"); } }; }; ko.applyBindings(new ViewModel());
<div id="main"> <h3>High Priority</h3> <div class="high" data-bind="sortable: { template: 'taskTmpl', data: highPriorityTasks, afterMove: myDropCallback }"></div> <h3>Normal Priority</h3> <div data-bind="sortable: { template: 'taskTmpl', data: normalPriorityTasks, afterMove: myDropCallback }"></div> <a href="#" data-bind="click: addTask">Add Task</a> <hr/> <h3>Trash</h3> <div class="trash" data-bind="sortable: trash"></div> <script id="taskTmpl" type="text/html"><div class="item"> <span data-bind="visible: !$root.isTaskSelected($data)"> <a href="#" data-bind="text: name, click: $root.selectedTask"></a> </span> <span data-bind="visibleAndSelect: $root.isTaskSelected($data)"> <input data-bind="value: name, event: { blur: $root.clearTask }" /> </span> </div></script> </div> <div id="results"> <h3>High Priority</h3> <ul data-bind="foreach: highPriorityTasks"> <li data-bind="text: name"></li> </ul> <h3>Normal Priority</h3> <ul data-bind="foreach: normalPriorityTasks"> <li data-bind="text: name"></li> </ul> </div>
body { font-family: arial; } h3 { font-weight: bold; text-align: center; } div { padding: 5px; margin: 5px; border: black 1px solid; } p, a { font-size: .8em; } ul { padding-bottom: 10px; } .ko_container { width: 125px; min-height: 50px; background-color: #AAA; } .high { background-color: red; } .trash { background-color: #000; } .item { background-color: #DDD; cursor: move; text-align: center; } .item input { width: 100px; } #main { float: left; width: 150px; margin-top: 0px; } #results { margin-left: 175px; width: 150px; }