淘汰赛:模型未在Internet Explorer中更新

时间:2014-11-14 15:59:47

标签: javascript internet-explorer knockout.js compatibility custom-binding

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

我有跨度,双击时会将自己更改为文本框。

这是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事件无法正常工作)。模糊事件工作正常。我不知道它是否与未触发的输入事件有关。

我试图强制模糊事件,但这搞砸了我的逻辑。

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

尝试在

中添加 valueUpdate:&#39; keyup&#39;
<input class="SchemaInput" data-bind="value: Description, visible: isEditing(), hasFocus: isEditing(), event: { keyup: endEditEnter, blur: endEdit }" />

这将强制绑定更新密钥释放上的描述observable的值