CODEWITHSUNDEEP
javascriptasp.netknockout.jsdom-eventssingle-page-application
ngergo6
ngergo6

Reputation: 267

KnockoutJS - Click binging with parameters not working on mobile devices

I am working on a web application that needs to be fully compatible with mobile and desktop devices. I am binding the click event to a node and passing a parameter to the viewmodel's function like so:

<a href="#" class='btn btn-danger' data-bind="click: bsDeleteModal.open.bind($data, 1)"><span>Delete</span></a>

It is working properly on desktop browsers but not on mobiles or tablets. I have tested this code on Android native browsers on a tablet and phone, Internet Explorer 11 on Windows Phone 8.1, iPhone Safari and mobile versions of Chrome on each device with no luck.

This is my viewmodel oversimplified:

var DeleteModalViewModel = function(/*parameters....*/){
  var self = this;
  //parameters...
  self.open = function(position){
    alert("position: " + position);
  }
}

var vm = (function(){ //...my viewmodel...
  var self = this;
  self.bsDeleteModal = new DeleteModalViewModel(/*parameters...*/);
  
  //additional parameters...
})();

ko.applyBindings(vm);

Is there a known issue or bug in the knockoutjs 3 framework which prevents me from binding events while passing parameters on mobiles?
I have also tried passing it like so:

<a data-bind="click: function(data, event){ bsDeleteModal.open.bind($data, 1) }" />

Also I have tried adding $root before the function name thinking mobile devices can not parse function names correctly but had no luck.

<a data-bind="click: function(data, event){ $root.bsDeleteModal.open.bind($data, 1) }" />

Any help would be much appreciated.

EDIT: I forgot to mention: my html code is inside a <script type="text/html" /> template tag which is loaded as a partial view when the page loads. This might be important since I had issues with dynamic template bindings before.

Upvotes: 1

Views: 630

Answers (2)

ngergo6
ngergo6

Reputation: 267

I managed to solve the issue with the help of a colleague.
It turns out the problem was related to the template binding as the button on mobile devices was rendered "behind" the page.
Once I set a z-index of 9999 in css to the button, the binding worked fine.

Upvotes: 1

Robert Slaney
Robert Slaney

Reputation: 3722

The bind function may not be present on some devices + browser combination.

That is an ES5 feature that you need to polyfill if it's missing

Check for existence of Function.prototype.bind

Upvotes: 0

Related Questions