Knockoutjs点击并编辑字段不更新可观察
Knockoutjs click and edit field not updating observable
我正在尝试使用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"> </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"> </span>
<span style='margin-left:10px;color:maroon' data-bind="text: value, click: function() {editItem()}"> </span>
</script>
这似乎应该奏效,但我显然不明白什么。
两件事:
文本框更改事件仅在模糊时触发。您将希望使用keydown而不是更改。
其次,valueUpdate绑定区分大小写。使用valueUpdate,而不是valueUpdate。
这里有一个更新的fiddle来修复这些问题。
相关文章:
- 下拉列表未从计算的可观察项更新
- 可观察元素数组未更新
- 如何在 Knockout.js 中更新可观察数组后立即使用 DOM 容器
- 更新挖空中可观察数组中项目的属性
- 挖空映射:加载数据后,父模型中的计算可观察量不会更新
- 对可观察数组foreach的更新删除了格式化knockoutjs
- 当通过Ajax成功回调更新可观察数组时,启用绑定中断
- 自定义指令中的ng类不观察更新
- 剔除不更新辅助表的可观察数组
- 正在更新Knockoutjs可观察数组项
- 敲除可观察数组并没有更新从数组中移除元素的视图
- 在小间隔内通过javascript更新css时,会出现断断续续的动态观察动画
- 无限循环当观察父对象时,观察者不更新任何值
- 剑道可观察在触发更改事件后不更新
- 正在更新挖空.js可观察数组元素值
- 当可观察数组是其他模型的属性时,挖空不会更新 UI
- 自定义绑定到可观察数组,不调用更新函数
- KnockoutJs 更新视图模型可从 Json Web 服务中观察到
- 使用 ko.mapping.fromJS 更新异步 ajax 调用后可观察的淘汰表
- Emberjs更新/观察者/运行循环