Knockoutjsはフィールドをクリックして編集しませんobservableを更新しません

Question

knockoutjsを使用して単純なクリックと編集システムを実装しようとしています。私は入力フォーカスを変更した場合、値が正しく更新されているように見えるが、私は結合キープレスイベントを使用する際に値を更新するように見えることはできません。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); 

バインディング：

<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> 

これはうまくいくはずですが、私は明らかに何かを理解していません。

Answer 1

2つのもの：

テキストボックス変更イベントは、ぼかしでのみ発生します。あなたは変更の代わりにkeydownを使いたいでしょう。

第2に、valueUpdateバインドでは大文字と小文字が区別されます。 valueupdateではなく、valueUpdateを使用します。

ここにはupdated fiddle that fixes these problemsがあります。