我正在尝试创建一个具有以下属性的 knockout-backed 文本输入:
- 它在聚焦时是可见的(并且它的值的跨度是可见的 否则)
- 退出键取消更改
- Enter 键提交更改 (以上所有工作)
- 失去对输入的关注会导致更改提交
- 除非当用户点击取消按钮时焦点丢失
此处的UNLESS 部分是我唯一没有使用的部分。发生的事情是当输入失去焦点时,在单击“取消”按钮调用取消函数之前可观察更新。
这是我的相关代码。
HTML 片段:
<div class="description-control">
<!-- ko if:showDescEditBox -->
<div class="description-form">
<input type="text" class="form-control" data-bind="value: description,
event: {keydown: handleKeypress, hasFocus: showDescEditBox}"></input>
<div class="btn-group">
<button data-bind="click: onDescriptionSubmit"><i class="fa fa-check"></i></button>
<button data-bind="click: onDescriptionCancel"><i class="fa fa-close"></i></button>
</div>
</div>
<!-- /ko -->
<!-- ko ifnot:showDescEditBox -->
<div class="description-display" data-bind="click: onDescriptionClick">
<i class="fa fa-edit"></i><span data-bind="text: description"></span>
</div>
<!-- /ko -->
</div>
View 模型:
this.handleKeypress = function (data, event) {
var keyCode = (event.which ? event.which : event.keyCode);
switch (keyCode) {
case Util.keyCodes.ENTER:
this.onDescriptionSubmit();
return false;
case Util.keyCodes.ESCAPE:
_this.onDescriptionCancel();
return false;
default:
return true;
}
};
this.onDescriptionClick = function () {
_this.showDescEditBox(true);
};
this.onDescriptionSubmit = function () {
_this.showDescEditBox(false);
};
this.onDescriptionCancel = function () {
_this.description(_this.dataObj().description);
_this.showDescEditBox(false);
};
对 showDescEditBox 可观察对象的订阅:
this.showDescEditBox.subscribe(function () {
if (!_this.showDescEditBox()) {
if (_this.description() !== _this.dataObj().description) {
_this.update();
}
}
});
注意 _this
等同于 var self = this;
此外,这是 Typescript 生成的 JS。我选择展示生成的 JS 以将问题空间限制在 JS 而不是讨论 Typescript 的特殊性。因此,如果这里的 this
和那里的 _this
看起来有点奇怪,请尝试跳过它。
最佳答案
你想要的东西不可能开箱即用,因为它都是基于事件的,并且事件是独立触发的。
你可以做几件事:
- 在
onblur
处理程序中使用setTimeout
等待几毫秒,以便取消可以在实际触发之前清除超时。这有一些问题,比如不知道什么时候取消会真正触发(等待时间可能不够长)。此外,您还必须以某种方式 Hook 到 knockout 内部深处的 onblur 事件 - 将描述的原始值存储在
onDescriptionClick
中,并将description
的值恢复为onDescriptionCancel
中的备份值。我认为这会很好地工作,因为我认为事件将按“onblur”、“click”顺序触发。
关于javascript - KO 输入编辑模式并取消,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31254432/