Question

I’ve got some KnockoutJS code working – it pulls in a list and binds it to a table.

For the table-data which displays the name, I would like that to be an <a href=...>, but not sure how. The name is still displayed. But you can click on it.

Here’s my current code:

<tbody data-bind="foreach: items">
    <tr>
        <td data-bind="text: name()"></td>
        <td data-bind="text: price()"></td>
        <td data-bind="text: endsOn()"></td>
    </tr>   
</tbody>

nothing too crazy.

I have another property called url which contains the full http://blah URL to direct the users to. Also, I would like a new tab to open up.

Any suggestions?

Answer 1

You have to remove data-bind attribute from td tag and put a with attr binding inside td:

<tbody data-bind="foreach: items">
    <tr>
        <td><a data-bind="text: name, attr: {href: url}" target="_new"></a></td>
        <td data-bind="text: price"></td>
        <td data-bind="text: endsOn"></td>
    </tr>   
</tbody>

P.S. You don’t have to put () after property name in data-bind attribute if you don’t construct expression.