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点击和编辑字段不更新可观察

回答

相关问题