Bridgier
Bridgier

Reputation: 23

Knockoutjs click and edit field not updating observable

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">&nbsp</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">&nbsp</span>
<span style='margin-left:10px;color:maroon' data-bind="text: value, click: function() {editItem()}">&nbsp</span>     
</script>

It seems like this should work, but I'm obviously not understanding something.

Upvotes: 1

Views: 2315

Answers (1)

Judah Gabriel Himango
Judah Gabriel Himango

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

Related Questions