Hock和mailto鏈接在KnockoutJS

Question

我想要顯示一個鏈接和使用Knockout在顯示模板中的mailto的表。我還是真的很新，想提前道歉！

這是我的顯示模板原是：

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

，這是我到目前爲止，減去郵寄地址和鏈接：

<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

使用attr和text性質在data-bind屬性中是這樣的：

<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

確保在綁定attr即primaryEmail（）時通過函數語法訪問電子郵件，否則它將返回函數定義而不是值。

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

例子：http://jsfiddle.net/lifetimelearner/yr7SP/2/

Answer 3

如果你想要去MVVM所有的方式，它是最好的，讓您查看啞地：

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

然後進行計算觀察到你的觀點型號：

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