Knockout.js KnockoutJS中的Href和mailto链接

我正在尝试使用Knockout在显示模板中显示包含链接和mailto的表。我还是个新手，要提前向你道歉

这就是我的显示模板最初的内容：

{0}
{3}
{4}
{5}
{6}     
{7}

这就是我到目前为止所拥有的，减去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>
                <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>

---

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

如果您想一直使用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)
}

我不同意这是“一路MVVM”。MVVM并不意味着愚蠢的视图，它意味着分离的视图和视图模型。这实际上是通过引入HTML链接知识将viewmodel与视图绑定在一起。链接将使用电子邮件地址这一事实是viewmodel不应该拥有的知识，但视图应该拥有的知识。您可以为
mailto
链接创建一个
binding处理程序
，但我认为这是不必要的。在
mailto
链接中显示电子邮件的视图是视图行为，应该放在那里。@Tyrsius您的观点是正确的。然而，我仍然认为“mailto”不是视图的一个方面，而是模型的一个方面，因为它封装了业务逻辑。考虑要添加CC或使用另一个高级的情况。如果你的模型中有逻辑，它很容易改变，只在一个地方：计算的可观测值。如果您在视图中完成了字符串连接，则必须更新使用mailto链接的每个位置。顺便说一句，不管味道如何，代码都是解决OP问题的有效方法；-）我从没说过它是无效的。。。只是我不同意你的说法。不过，关于
mailto
有一些特性，您提出了一个很好的观点，我认为
绑定处理程序通过向其传递选项来包含这些特性是一种合适的方式。我仍然不认为这是商业逻辑。您发送邮件的人有
电子邮件地址
，但该人没有
邮件收件人
链接；它不是模型的属性，也不是函数。这纯粹是一种将电子邮件地址显示为可以单击的链接的方式。@Tyrsius抱歉，“有效性”评论不是专门针对您的，只是针对单击“此答案不有用”按钮的人。用户2048714是正确的，您需要确保使用该功能访问该值。