arrays - using window.open with knockout binding -

i'm using knockout's foreach loop fetches values array , displays in href tag.

this works once use javascript's onclick (i need onclick using inappbrowser plugin mobiles) , uses variables inside it, doesn't work. see example here:

<div data-bind="foreach: consumerdata" style="margin-bottom:100px;">   <table> <tr> <td colspan="2"> <p style="font-size:larger; margin-bottom:5px;"> <a style="text-decoration:none;"  data-bind="attr: { href: 'http://domain:8080/dsservlet/'+$data[0]+'.png?key=dk188961' },  text: $data[1]" target="_blank"  onclick="window.open('http://domain:8080/dsservlet/'+$data[0]+'.png?key=dk188961',  '_blank', 'location=yes'); return false;"></a></p> </td></tr> </table>  </div> 

as can see $data[0] works fine inside data-bind attribute. using same $data[0] inside onclick doesn't work still inside foreach loop. assume need declare javascript variable able make work, how declare inside foreach loop? need declare inside foreach loop array varies different values.

see javscript part here:

var viewmodel = function() {   this.consumerdata = ko.observablearray([[174302,"business - application conduct business home.pdf",".pdf","dk89639"],[120183,"glovent-brochure.pdf",".pdf","dk472894"]]); }  ko.applybindings(new viewmodel()); 

with knockout there's different way handle onclick: use click binding handler. this:

var viewmodel = function() {     var self = this;      this.consumerdata = ko.observablearray([[174302,"business - application conduct business home.pdf",".pdf","dk89639"],[120183,"glovent-brochure.pdf",".pdf","dk472894"]]);      this.openservlet = function(data) {         window.open('http://domain:8080/dsservlet/'+data[0]+'.png?key=dk188961', '_blank', 'location=yes');     }; };  ko.applybindings(new viewmodel()); 

<a data-bind="attr: { href: 'http://domain:8080/dsservlet/'+$data[0]+'.png?key=dk188961' },               click: $parent.openservlet                text: $data[1]"     target="_blank"></a> 

please read linked documentation carefully, it'll have answers many follow-up questions might arise.

finally, consider converting consumerdata proper sub view model in own right, instead of raw array of data. allow create href in observable or computed observable, allowing unit test it.

as footnote, if really need have onclick set using attr binding used href. example:

var consumerdata = function(data) {    var self = this;      self.id = data[0];    self.filename = data[1];    self.extension = data[2];    self.code = data[3];      self.url = 'http://domain:8080/dsservlet/' + self.id + '.png?key=dk188961';      self.openservlet = function() {      window.open(self.url, '_blank', 'location=yes');    };      self.onclickvalue = "window.open('http://domain:8080/dsservlet/'+data[0]+'.png?key=dk188961', '_blank', 'location=yes'); return false";      // overwrite them again testing on stackoverflow (window.open crap testing)    self.openservlet = function() { alert(self.url); };    self.onclickvalue = "alert('" + self.url + "'); return false;";  };    var viewmodel = function() {    this.consumers = ko.observablearray([      new consumerdata([174302, "business - application conduct business home.pdf", ".pdf", "dk89639"]),      new consumerdata([120183, "glovent-brochure.pdf", ".pdf", "dk472894"])    ]);  };    ko.applybindings(new viewmodel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>    <div data-bind="foreach: consumers">    <p>      <a data-bind="attr: { href: url, onclick: onclickvalue }, click: openservlet, text: filename" target="_blank"></a>    </p>  </div>