Reputation: 23
I'm trying to use knockoutjs to implement a simple click and edit system. The value seems to be updating correctly if I change the input focus, but I can't seem to get the value to update when I use a keypress event binding: http://jsfiddle.net/rxYGz/11/
function Item(label, value)
{
this.label = ko.observable(label);
this.value = ko.observable(value);
this.editing = ko.observable(false);
this.editItem = function(e) {
this.editing(true);
}
this.checkEditDone = function(e,f) {
if (e.which == 13)
{
this.editing(false);
}
else
return true;
};
return this;
};
var SimpleViewModel = {
editItem: function(item) {
item.editing(true);
},
templateToUse: function(item) {
return item.editing() ? 'editTmpl' : 'viewTmpl';
},
title : ko.observable(new Item('Request Title', 'EDIT THIS TITLE')),
product_line : ko.observable(new Item('Product Line', 'EDIT THIS LINE'))
};
ko.applyBindings(SimpleViewModel);
Bindings:
<ul class='list'>
<div class='header'>Request</div>
<li data-bind="template: {name: templateToUse, data: title}"></li>
<li data-bind="template: {name: templateToUse, data: product_line}"></li>
</ul>
<script id='editTmpl' type='text/html'>
<span data-bind="text: label"> </span>
<input data-bind="value: value, valueupdate: 'change', hasfocus:editing, event: {keypress: checkEditDone}"/>
</script>
<script id='viewTmpl' type='text/html'>
<span data-bind="text: label"> </span>
<span style='margin-left:10px;color:maroon' data-bind="text: value, click: function() {editItem()}"> </span>
</script>
It seems like this should work, but I'm obviously not understanding something.
Upvotes: 1
Views: 2315
Reputation: 60001
Two things:
The textbox change event is fired only on blur. You'll want to use keydown instead of change.
Second, the the valueUpdate binding is case sensitive. Use valueUpdate, not valueupdate.
Here's an updated fiddle that fixes these problems.
Upvotes: 2