Href and mailto links in KnockoutJS
11,318
Solution 1
Using the attr
and text
properties in the data-bind
attribute like so:
<script type="text/template" id="customerSearchDisplayTemplate">
<tr>
<td class = "hiddenId"><span data-bind="text: customerSearchID"/></td>
<td><span data-bind="text: fullName" /></td>
<td>
<span>
<a data-bind="text: primaryEmail,
attr: {href: 'mailto:'+primaryEmail()}" />
<span/>
</td>
<td>
<span>
<a data-bind="text: secondaryEmail,
attr: {href: 'mailto:'+secondaryEmail()}" />
<span/>
</td>
<td><span data-bind="text: homePhone" /></td>
<td><span data-bind="text: workPhone" /></td>
<td><span data-bind="text: mobilePhone" /></td>
<td><span data-bind="text: lastLogonDate" /></td>
<td><span data-bind="text: wsNotes" /></td>
</tr>
</script>
Solution 2
If you want to go MVVM all the way, it's best to keep your View as dumb as possible:
<a data-bind="text: primaryEmail, attr: {href: primaryEmailMailtoLink}"></a>
Then make a computed observable on your view model:
var ViewModel = function() {
var self = this;
// Observable property:
self.primaryEmail = ko.observable('[email protected]');
// Dependent observable:
self.primaryEmailMailtoLink = ko.computed(function() {
return 'mailto: ' + self.primaryEmail();
};
// Etc. (rest of your view model)
}
Author by
Bobandra
Updated on June 17, 2022Comments
-
Bobandra almost 2 years
I'm trying to display a table with links and mailto's in a display template using Knockout. I'm still really new to knock out to I apologize in advance!
This is what my display template was originally:
<script type="text/template" id="customerSearchDisplayTemplate"> <td class="hiddenId">{0}</td> <td><a href="/wrenchsciencewebadmin2/UserManager/Customer/CustomerEditor.aspx?CustomerID={1}">{1}</a></td> <td><a href="mailto:{2}">{2}</a></td> <td>{3}</td> <td>{4}</td> <td>{5}</td> <td>{6}</td> <td>{7}</td> <td><a href="/wrenchsciencewebadmin2/Common/PopupWindows/CustomerNotes.aspx?customerid={8}">{8}</a></td> </script>
and this is what I have so far, minus the mailto AND links:
<script type="text/template" id="customerSearchDisplayTemplate"> <tr> <td class = "hiddenId"><span data-bind="text: customerSearchID"/></td> <td><span data-bind="text: fullName" /></td> <td><span data-bind="text: primaryEmail" /></td> <td><span data-bind="text: secondaryEmail" /></td> <td><span data-bind="text: homePhone" /></td> <td><span data-bind="text: workPhone" /></td> <td><span data-bind="text: mobilePhone" /></td> <td><span data-bind="text: lastLogonDate" /></td> <td><span data-bind="text: wsNotes" /></td> </tr> </script>