Href und mailto-links in KnockoutJS

Ich versuche, die Anzeige einer Tabelle mit links und mailto ' s in einer display-Vorlage mit Knock-out. Ich bin noch wirklich neu auf knock out, ich entschuldige mich im vorraus!!!!

Dies ist, was mein display template war ursprünglich:

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

und das ist, was ich habe, so weit, minus die E-Mail UND links:

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

InformationsquelleAutor der Frage Bobandra | 2013-08-20

  1. 20

    Mithilfe der attr und text Eigenschaften in der data-bind - Attribut wie folgt:

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

    InformationsquelleAutor der Antwort Kris

  2. 4

    Sicher sein, um den Zugriff auf die E-Mails über die syntax der Funktion bei der Bindung der attr d.h. primaryEmail (), ansonsten wird es wieder die Funktion Definitionen und nicht den Wert. 

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

    Beispiel: http://jsfiddle.net/lifetimelearner/yr7SP/2/

    InformationsquelleAutor der Antwort

  3. 3

    Wenn Sie gehen wollen, MVVM den ganzen Weg, es ist am besten halten Sie Ihre Anzeigen so dumm als möglich:

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

    Dann eine berechnete beobachten auf Ihrem view-Modell:

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

    InformationsquelleAutor der Antwort Jeroen

Schreibe einen Kommentar