javascript - KO 输入编辑模式并取消

Question

我正在尝试创建一个具有以下属性的 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 看起来有点奇怪，请尝试跳过它。

Answer 1

你想要的东西不可能开箱即用，因为它都是基于事件的，并且事件是独立触发的。

你可以做几件事:

• 在 onblur 处理程序中使用 setTimeout 等待几毫秒，以便取消可以在实际触发之前清除超时。这有一些问题，比如不知道什么时候取消会真正触发(等待时间可能不够长)。此外，您还必须以某种方式 Hook 到 knockout 内部深处的 onblur 事件
• 将描述的原始值存储在 onDescriptionClick 中，并将 description 的值恢复为 onDescriptionCancel 中的备份值。我认为这会很好地工作，因为我认为事件将按“onblur”、“click”顺序触发。