KnockoutJS'de Href ve mailto bağlantıları

Question

Bağlantılar ve mailto'ları içeren bir tabloyu Knockout kullanarak bir görüntü şablonunda göstermeye çalışıyorum. Şimdiden özür dilemeye başladığım için hala çok yeni yaşıyorum!

Bu benim ekran şablon aslen budur:

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

ve bu, bugüne kadar ne eksi mailto VE bağlantılar: attr ve text özelliklerini kullanma

<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

özniteliğinde olduğu gibi:

<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

Öznitelikleri bağlarken, işlev sözdizimi yoluyla e-postalara eriştiğinizden emin olun, aksi halde primerEmail() aksi takdirde değer yerine işlev tanımlarını döndürür.

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

Örnek:

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

Sonra görünümde bilgisayarlı gözlemlenebilir olun: http://jsfiddle.net/lifetimelearner/yr7SP/2/

Answer 3

Eğer MVVM tüm yol gitmek istiyorsanız, mümkün olduğunca dilsiz sizin Görünüm tutmak en iyisidir 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) 
}