CODEWITHSUNDEEP
firefoxknockout.jsbindingclick
Ben Drury
Ben Drury

Reputation: 1376

Firefox is removing the event and data parameters from knockout click binding function

I have a knockout click binding function that works in Chrome and IE, but errors in firefox with the following error:

ReferenceError: event is not defined

I realise that I have to pass in the event as it's not part of the window in FF, but it looks like FF changes the binding so that I am unable to pass in the event.

My template as written looks like this:

<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>

However, when rendered by FF is looks like this (without the params):

<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>

The CSS binding still seems to work and colour the button accordingly, but the params to the click binding function have gone.

Upvotes: 1

Views: 281

Answers (1)

Akrion
Akrion

Reputation: 18515

Pardon me if I am miss-understanding the goal here but why are you trying to pass data/event when those are already passed for you by ko click binding (see Note 1 in black)?

To get that id all you really need is to pass the function name you want to be the handler for your button click and since that function is part of your model it would automatically get the data/event parameters:

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

Upvotes: 4

Related Questions