Łącza Href i mailto w KnockoutJS

Question

Próbuję wyświetlić tabelę z łączami i mailto w szablonie wyświetlania przy użyciu Knockout. Nadal jestem całkiem nowy, aby znokautować, przepraszam z góry!

To właśnie mój szablon wyświetlacz był pierwotnie:

<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> 

i to, co mam tak daleko, minus mailto i linki:

<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> 

Answer 1

Używanie attr i text właściwości w atrybucie data-bind tak:

<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> 

Answer 2

Pamiętaj, aby uzyskać dostęp do wiadomości e-mail za pośrednictwem składni funkcji podczas wiązania attr tj. PrimaryEmail() w przeciwnym razie zwróci definicje funkcji, a nie wartość.

<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> 

Przykład: http://jsfiddle.net/lifetimelearner/yr7SP/2/

Answer 3

Jeśli chcesz iść MVVM całą drogę, to najlepiej, aby utrzymać Zobacz jak głupi, jak to możliwe:

<a data-bind="text: primaryEmail, attr: {href: primaryEmailMailtoLink}"></a> 

następnie dokonać obliczane zaobserwować na widoku model:

var ViewModel = function() { 
    var self = this; 

    // Observable property: 
    self.primaryEmail = ko.observable('foo@bar.com'); 

    // Dependent observable: 
    self.primaryEmailMailtoLink = ko.computed(function() { 
      return 'mailto: ' + self.primaryEmail(); 
    }; 

    // Etc. (rest of your view model) 
}