KnockoutJs Hyperlink to new Tab

Question

I have an ASP.Net MVC website that uses KnockoutJS and KOGrid in the views. It dynamically renders hyperlinks in one particular column as follows:

cellTemplate: '<a data-bind="text:$parent.entity.sendPort, attr: { href: $parent.entity.sendPortLink}" ></a>'

It's been decided that when clicked, the browser should present the new page in a new tab. So, I've tried adding the "target" attribute as follows:

cellTemplate: '<a data-bind="text:$parent.entity.sendPort, attr: { href: $parent.entity.sendPortLink, target:"_blank"}" ></a>'

This didn't work. The hyperlink was rendered but unable to click.

How can I do this?

Answer 1

The problem is in the double quotes. Double quotes are used for both the data-bind attribute and the target property. The opening double-quote of the target property closes the data-bind attribute.

Also there is no need to put the target in the data binding. The data is not dynamic so could simply be added to the a element:

Try changing it to:

cellTemplate: '<a target="_blank" data-bind="text:$parent.entity.sendPort, attr: { href: $parent.entity.sendPortLink }" ></a>'