[Knockout.js] KnockoutJS의 Href 및 mailto 링크


Answers

data-bind 속성에서 attrtext 속성을 다음과 같이 사용 :

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

그리고 이것은 내가 지금까지 가지고있는 것이며, mailto와 링크를 뺀 것입니다.

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



MVVM을 계속 진행하려면 View를 가능한 바보처럼 유지하는 것이 가장 좋습니다.

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



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/