using window.open with knockout binding - arrays

Question

I'm using knockout's foreach loop that fetches the values from an array and displays it in a href tag.
This all works well but once I use javascript's onclick (I need this onclick as I am using InAppBrowser plugin for mobiles) and uses the variables inside it, 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 you can see the $data[0] works fine inside the data-bind attribute. But using the same $data[0] inside the onclick doesn't work which is still inside the foreach loop. I assume I need to declare a javascript variable to be able to make it work, but how do I declare it inside the foreach loop? I need to declare it inside the foreach loop as the array varies with different values.
See the javscript part here:
var ViewModel = function() {
this.consumerData = ko.observableArray([[174302,"BUSINESS - APPLICATION TO CONDUCT A BUSINESS FROM HOME.pdf",".pdf","DK89639"],[120183,"Glovent-Brochure.pdf",".pdf","DK472894"]]);
}
ko.applyBindings(new ViewModel());

Answer 1

With Knockout there's a different way to handle onclick: use a click binding handler. Like this:
var ViewModel = function() {
var self = this;
this.consumerData = ko.observableArray([[174302,"BUSINESS - APPLICATION TO CONDUCT A BUSINESS FROM 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 the answers to many follow-up questions that might arise.
Finally, consider converting consumerData to a proper sub view model in its own right, instead of a raw array of data. This would allow you to create the href in an observable or computed observable, thus also allowing you to unit test it.
As a footnote, if you really need to have an onclick you could set it using the attr binding you also used for href. So for 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 for testing on StackOverflow (window.open is crap for 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 TO CONDUCT A BUSINESS FROM 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>