Firefox 正在从敲除点击绑定功能中删除事件和数据参数

Question

我有一个可在 Chrome 和 IE 中运行的淘汰点击绑定功能，但在 firefox 中出现错误并出现以下错误：

ReferenceError: event is not defined 

我意识到我必须传递事件，因为它不是 FF 窗口的一部分，但看起来 FF 更改了绑定，因此我无法传递事件。

我的模板是这样写的：

<button class="btn subplan" data-bind="click: function(data, event) { $root.openPlanModal(data, event) }, css: {'btn-success': (percentComplete()==100 && statusOverride()=='' && SOCexpired()==false) || (statusOverride()=='pass' && SOCexpired()==false), 'btn-warning':percentComplete()<100 && percentComplete()>0 && statusOverride()=='' && SOCexpired()==false, 'btn-danger': statusOverride()=='fail' || SOCexpired()==true}">
  <span data-bind="text: name()">Navigationserklärung</span>
  <span style="display: block" data-bind="text: latestSOCDateDisplay()"></span>
</button>

然而，当被 FF 渲染时，看起来像这样（没有参数）：

<button class="btn subplan btn-success" data-bind="click: function(){ ($root.openPlanModal || $root.trainingModel().openPlanModal)($data, event) }, css: {'btn-success': (percentComplete()==100 &amp;&amp; statusOverride()=='' &amp;&amp; SOCexpired()==false) || (statusOverride()=='pass' &amp;&amp; SOCexpired()==false), 'btn-warning':percentComplete()<100 &amp;&amp; percentComplete()>0 &amp;&amp; statusOverride()=='' &amp;&amp; SOCexpired()==false, 'btn-danger': statusOverride()=='fail' || SOCexpired()==true}">
  <span data-bind="text: name()">Navigationserklärung</span>
  <span style="display: block" data-bind="text: latestSOCDateDisplay()"></span>
</button>

CSS 绑定似乎仍然有效并相应地为按钮着色，但点击绑定函数的参数已经消失。

Answer 1

如果我错过了这里的目标，请原谅我，但是当ko click binding (see Note 1 in black) 已经为您传递了这些目标时，您为什么还要尝试传递data/event？

要获得该 id，您真正需要的是传递您希望作为按钮单击处理程序的函数名称，并且由于该函数是您模型的一部分，它会自动获取数据/事件参数：

data-bind="click: openPlanModal"

function VM() {
  var self = this;

  self.percentComplete = ko.observable();
  self.statusOverride = ko.observable();
  self.SOCexpired = ko.observable();
  self.name = ko.observable('name');
  self.latestSOCDateDisplay = ko.observable('latestSOCDateDisplay');

  self.openPlanModal = function(data, event) {
    console.log(event.currentTarget.id);
  }
}

ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button class="btn subplan" id='id1' data-bind="click: openPlanModal, css: {'btn-success': (percentComplete()==100 && statusOverride()=='' && SOCexpired()==false) || (statusOverride()=='pass' && SOCexpired()==false), 'btn-warning':percentComplete()<100 && percentComplete()>0 && statusOverride()=='' && SOCexpired()==false, 'btn-danger': statusOverride()=='fail' || SOCexpired()==true}">
  <span data-bind="text: name()">Navigationserklärung</span>
  <span style="display: block" data-bind="text: latestSOCDateDisplay()"></span>
</button>

Here is the jsFiddle