javascript - knockout : model not updated in internet explorer

Question

我们有一个奇怪的问题，它只发生在 Internet Explorer 中。该功能适用​​于 Firefox 和 Chrome。该错误可以在 knockout 2.2.1 和 knockout 3.1.0 中重现。

我有一些 span，当双击时它们会自动变成文本框。

这是 html:

<div>
    <span class="dataSourceSpan">@resourceManager.GetString("STR_DATABASE_SCHEMA_NAME"):</span>
    <div class="SchemasBloc">
        <ul class="Schemas" data-bind="sortable: { data: SchemaList, afterMove: UpdateDatabaseSchemaNameFromList }, visible: SchemaList().length > 0 ">
            <li class="SchemaList" data-bind="css: { selected: $data == $parent.SelectedSchema() }, click: $parent.SetSelectedSchema">
                <span class="labelText" data-bind="text: Description, visible: !isEditing(), event: { dblclick: startEdit }"></span>
                <input class="SchemaInput" data-bind="value: Description, visible: isEditing(), hasFocus: isEditing(), event: { keyup: endEditEnter, blur: endEdit }" />
                <a class="k-button" title="@resourceManager.GetString("STR_REMOVE_SCHEMA")" data-bind="click: $parent.removeSelectedSchema"><span class="k-icon k-i-close"></span></a>
            </li>
        </ul>
        <span class="addSchema">
            <a class="k-button" data-bind="click: AddSchema" title="@resourceManager.GetString("STR_ADD_SCHEMA")"><span class="k-icon k-i-plus"></span></a>
        </span>
    </div>
</div>

这是javascript:

var ShemaModel = function (description, IsNew) {
    var self = this;

    self.Description = ko.observable(description);
    self.IsNew = ko.observable(IsNew);

    self.isEditing = ko.observable(false);
    self.TemporaryEnvironmentDescription = ko.observable(false);


    self.startEdit = function (model, event) {
        self.isEditing(true);
        self.TemporaryEnvironmentDescription(self.Description());
        $(".Schemas .selected").children("input").focus();
    };

    self.endEdit = function (model, event) {
        if (self.Description() !== self.TemporaryEnvironmentDescription() && self.Description() !== "" && self.isEditing()) {
            self.TemporaryEnvironmentDescription(self.Description());
        }
        else if (self.IsNew() && self.isEditing()) {
            //remove the added schema
            environmentModel.SelectedEnvironment().SelectedDataSource().SchemaList.remove(environmentModel.SelectedEnvironment().SelectedDataSource().SelectedSchema());
        }
        environmentModel.SelectedEnvironment().SelectedDataSource().UpdateDatabaseSchemaNameFromList();
        self.isEditing(false);
        self.IsNew(false);
    };

    self.endEditEnter = function (Model, event) {
        event.keyCode === 13 && self.endEdit(Model, event);
    };
};

IE 中的问题是 endEdit() 函数 self.Description() 总是返回空字符串。模型未更新。在编辑之前，我们将 span 文本值存储在临时值中。当触发事件 endedit 时，我们将临时值与当前值进行比较。如果它们不同，我们更新模型。

当我们按下回车按钮时，模型没有更新(keyUp 事件没有正常工作)。模糊事件工作正常。不知道是不是和没有触发的enter事件有关。

我试图强制执行模糊事件，但它打乱了我的逻辑。

有什么想法吗？

Answer 1

尝试在

中添加 valueUpdate: 'keyup'

<input class="SchemaInput" data-bind="value: Description, visible: isEditing(), hasFocus: isEditing(), event: { keyup: endEditEnter, blur: endEdit }" />

这将强制绑定(bind)更新键释放时可观察到的描述值