Question

我尝试使用以下属性创建支持敲门的文本输入：

聚焦时可见（并且可以看到具有其值的跨度否则）
退出键取消更改
Enter键提交更改（以上所有工作）
失去对输入的关注会导致更改提交
- 除非当用户点击取消按钮时，焦点会丢失

这里的 UNLESS 部分是我唯一没有工作的部分。发生的事情是当输入失去焦点时，可观察到的更新在点击＆＃34;取消＆＃34;按钮调用取消功能。

这是我的相关代码。

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>

视图模型：

    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 observable的订阅：

        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

你想要的东西是不可能开箱即用的，因为它是基于所有事件而且事件是独立发射的。

你可以做几件事：

在等待几毫秒的setTimeout处理程序中使用onblur，因此取消可以在实际触发之前清除超时。这有一些问题，比如不知道什么时候取消会实际触发（等待时间可能不够长）。此外，你还必须以某种方式深入探讨onblur事件深入内部淘汰赛
将说明的原始值存储在onDescriptionClick中，并将description的值恢复为onDescriptionCancel中该备份值。我认为这样可以正常工作，因为我认为事件会在'onblur'，'click'命令中被触发。

KO输入编辑模式并取消

1 个答案: