Knockoutjs點擊和編輯字段不更新可觀察

我試圖用knockoutjs來實現一個簡單的點擊和編輯系統。價值似乎如果我改變輸入焦點被正確更新，但我似乎無法得到的值更新，當我使用一個按鍵事件綁定：http://jsfiddle.net/rxYGz/11/Knockoutjs點擊和編輯字段不更新可觀察

 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>

這似乎應該工作，但我顯然不理解的東西。

來源

2012-03-22 Bridgier

你真正的約束力在哪裏？ – 2012-03-22 19:16:08

它可能是一個特定於瀏覽器的實現，但是我通過綁定到鍵盤而不是按鍵來讓你的小提琴在Firefox中工作。 – Tuan 2012-03-22 19:32:50

對不起，我想我已經包含了html代碼片段。從「按鍵」改變爲「鍵控」似乎起作用。 – Bridgier 2012-03-22 20:51:40

兩件事：

textbox change事件僅在模糊時觸發。你會想使用keydown而不是改變。

其次，valueUpdate綁定區分大小寫。使用valueUpdate，而不是valueupdate。

這是updated fiddle that fixes these problems。

來源

2012-03-22 23:09:28

Knockoutjs點擊和編輯字段不更新可觀察

回答

相關問題