Knockout.js正在返回Internet中焦点绑定的未定义事件

Question

我试图将Knockout.js和jQuery自动大小插件用于评论流系统。基本上，当一个注释输入被聚焦时，我使用如下所示的Knockout.js事件绑定：

data-bind="event: {focus: $parent.autosize, blur: $parent.resize}"

在我的模型中，我按照以下方式实现了autosize函数：

$self.autosize = function(data, event) {
    var textarea = $(event.target);
    textarea.autosize();
});

然而，据我所知，event是undefined，我无法使用它来查找文本区域，以便在其上调用autosize()。我也无法查询textarea的属性，当我使用console.log查找event的值时，将返回undefined。

这似乎只发生在Internet中。特别是第8-9版。IE 10以及Chrome、Firefox等都按预期工作。Knockout.js事件绑定和Internet是否存在这样的已知问题？

Answer 1

在IE中，您需要访问event.srcElement而不是event.target。所以，你可以做var textArea = $(event.target || event.srcElement);

不过，另一种类似于"Knockout“的解决方案是添加一个快速的自定义绑定，将该逻辑排除在视图模型之外，如下所示：

ko.bindingHandlers.autosize = {
  init: function(element) {
      ko.utils.registerEventHandler(element, "focus", function() {
          $(element).autosize();
      });

      ko.utils.registerEventHandler(element, "resize", function() {
           //whatever you call here
      });

  }
};

然后，将data-bind="autosize: true"放在元素上即可。

Answer 2

Ryan的答案是一个很好的解决“自动大小”问题的方法，但我也想进一步解释缺乏event.target的问题。当使用jQuery处理事件时，jQuery将标准化event对象以包括target，即使浏览器不包括它。

如果jQuery是存在的(从而提供了event.target)，那么它将使用jQuery进行事件处理，但要做到这一点，jQuery需要在加载Knockout时出现。那么，简单地说，如果您想要正确地集成这两者，就应该在jQuery之前将其包含在HTML中。