Knockoutjs点击并编辑字段不更新可观察

Knockoutjs click and edit field not updating observable

本文关键字:更新 观察 字段 编辑 Knockoutjs      更新时间:2023-09-26

我正在尝试使用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>

这似乎应该奏效,但我显然不明白什么。

两件事:

文本框更改事件仅在模糊时触发。您将希望使用keydown而不是更改。

其次,valueUpdate绑定区分大小写。使用valueUpdate,而不是valueUpdate。

这里有一个更新的fiddle来修复这些问题。