Question

这是我的网站显示的非常奇怪的行为，但这里是描述（我将尽可能地描述它，它是一个更大的基于Web的应用程序的一部分）：

我有一个页面，允许用户创建，阅读，更新，删除客户的过滤器（即年龄，家庭大小等）

表单是动态填充的（使用ajax），它是使用knockout foreach绑定有效生成的（根据ajax请求和过滤器数量生成了几种这样的表单）。

当用户更新过滤器时发生的事情之一是发生了一些验证（日期是日期，家庭大小是数字等），然后会显示保存按钮和取消按钮

两个按钮最初都被CSS隐藏，然后当编辑过滤器时，两个按钮都可见，并且敲除启用绑定用于启用/禁用保存按钮，具体取决于验证通过/失败，使用敲除实时。（我们也有服务器端验证，但这与此问题无关）。

除了IE8之外，这一切在所有浏览器中都能正常工作（对于我们的客户来说，这是一个必须支持此Web应用程序的浏览器）。

在IE8中验证失败时，按照惯例禁用保存按钮，但在用户将鼠标移动几个像素之前，它仍然会从页面中隐藏。

<div id="filter-editor" class="menu-list" data-bind="foreach: filters">
  <form class="form-inline new-filter-form">
    <select class="input-medium" data-bind="options: $root.fields, optionsText: 'name', value: attribute"></select>
    <select class="input-small" data-bind="options: $root.getFilteredOperators($data), optionsText: 'symbol', optionsValue: 'index', optionsCaption: 'Choose...', value: operator"></select>
    <input type="text" class="input-small editable editing"
data-bind="css: {'invalid': !isValid()}, value: value,  valueUpdate: ['keyup']"/>
    <span data-bind="css: {'hidden': !isDirty()}">
      <button class="btn btn-small btn-success" title="Save changes" data-bind="enable: isValid, click: $root.saveCondition.bind(null, $parent, $data)">Save</button>&nbsp;
      <button class="btn btn-small" title="Cancel changes" data-bind="click: $root.cancelConditionEdit.bind(null, $parent, $data)">Cancel</button>
    </span>
  </form>
</div>

isValid（）方法返回true / false（布尔值），然后启用/禁用按钮。我无法理解为什么在鼠标移动之前隐藏按钮的原因。我们没有附加任何鼠标事件。有什么建议吗？

编辑：我已经取得了一些成功，让按钮在IE8中持续显示。我添加了一个'css'绑定到保存按钮，这会强制按钮始终显示，无论它是否已应用禁用或启用属性。

<button class="btn btn-small btn-success" title="Save changes" data-bind="css: {'blah': 'blah'}, enable: isValid, click: $root.saveCondition.bind(null, $parent, $data)">Save</button>

然而，看起来CSS绑定只是导致DOM更新，即使我在其中放置了无意义的属性和值。这是一个快速修复，但为什么会在IE8上发生这种情况，为什么CSS绑定会修复它呢？

Answer 1

尝试以这种方式将所有绑定括在引号中：

<button class="btn btn-small btn-success" title="Save changes" data-bind="'css': {'blah': 'blah'}, 'enable': isValid, 'click': $root.saveCondition.bind(null, $parent, $data)">Save</button>

IE8不喜欢淘汰赛，所以这可能会解决一些问题。

在IE8中Knockout.js'启用'绑定隐藏按钮元素

1 个答案: