knockout.js - for - knockout js data bind text
Href y enlaces de mailto en KnockoutJS (3)
Estoy tratando de mostrar una tabla con enlaces y mailto en una plantilla de visualización usando Knockout. Todavía soy muy nuevo para noquearme ¡Me disculpo por adelantado!
Esto es lo que mi plantilla de visualización fue originalmente:
<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>
y esto es lo que tengo hasta ahora, menos los enlaces Y de mailto:
<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>
Asegúrese de acceder a los correos electrónicos a través de la sintaxis de la función cuando vincula el attr ie primaryEmail (), de lo contrario, devolverá las definiciones de la función en lugar del valor.
<div data-bind="template: { name : ''customerSearchDisplayTemplate''}"></div>
<script type="text/template" id="customerSearchDisplayTemplate">
<tr>
<td class="hiddenId">
<span data-bind="text: customerSearchID"/>
</td>
<td><span data-bind="text: fullName" /></td>
<td>
<a data-bind="text: primaryEmail,
attr: { href : ''mailto:''+primaryEmail() }" />
</td>
<td>
<a data-bind="text: secondaryEmail,
attr: { href : ''mailto:''+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>
Si quieres utilizar MVVM hasta el final, lo mejor es mantener tu vista lo más tonta posible:
<a data-bind="text: primaryEmail, attr: {href: primaryEmailMailtoLink}"></a>
Luego haga una observación computable en su modelo de vista:
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)
}
Usar las propiedades attr y text en el atributo de data-bind así:
<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>