KnockoutJSのHrefとmailtoリンク

Question

ノックアウトを使用して、表示テンプレートにリンクと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> 

、これは私がこれまで持っているもので、マイナスのmailtoおよびリンク：attrとtextプロパティを使用して

<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

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をバインドするときに関数構文で電子メールにアクセスしてください。そうでない場合は、値ではなく関数定義が返されます。

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

例：

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

は、その後、あなたのビューに基づいて計算に観察を行います。http://jsfiddle.net/lifetimelearner/yr7SP/2/

Answer 3

あなたはMVVMにすべての道を行きたい場合、それは可能な限りダムあなたのビューを維持するのが最善ですモデル：

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