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

Posted 2023-03-27

【中文标题】Knockoutjs 单击并编辑字段不更新可观察的

【英文标题】：Knockoutjs click and edit field not updating observable

【发布时间】：2012-04-07 09:47:38

【问题描述】：

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

看起来应该可以，但我显然不明白。

【问题讨论】：

它可能是特定于浏览器的实现，但我通过绑定到 keyup 而不是 keypress 让你的小提琴在 Firefox 中工作。

对不起，我以为我已经包含了 html sn-p。从“keypress”更改为“keyup”似乎可行。

【参考方案1】：

两件事：

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

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

这是updated fiddle that fixes these problems。