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

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

1 个答案: