KnockoutJS中的Href和mailto链接

Question

我尝试使用Knockout在显示模板中显示带有链接和mailto的表格。我对knock out还是很新，所以提前道歉！

这是我的显示模板原始代码：

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

- Bobandra

Answer 1

可以在 data-bind 属性中使用 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>

- Kris

---

用户2048714是正确的，你需要确保使用函数来访问该值。 - Mike Kormendy

Answer 2

请确保在绑定属性时通过函数语法访问电子邮件，即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/

- user2048714

Answer 3

如果你想全面采用MVVM，最好让你的视图保持尽可能的简单：

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

然后在您的视图模型上创建一个计算的可观察对象：

var ViewModel = function() {
    var self = this;

    // Observable property:
    self.primaryEmail = ko.observable('[e-mail]');

    // Dependent observable:
    self.primaryEmailMailtoLink = ko.computed(function() {
            return 'mailto: ' + self.primaryEmail();
    };

    // Etc. (rest of your view model)
}

- Jeroen

---

我不同意这是“完全采用MVVM”的说法。MVVM并不意味着愚蠢的视图，而是意味着分离的视图和视图模型。这实际上是通过引入HTML链接知识将视图模型与视图绑定在一起。电子邮件地址将要被链接使用这一事实是视图模型不应该拥有但是视图应该拥有的知识。你可以为mailto链接创建一个binding handler，但我认为这是不必要的。在视图中显示带有mailto链接的电子邮件是视图行为，应该留在那里。 - Kyeotic

@Tyrsius 你说得很有道理。然而，我仍然认为“mailto”不是View的一个方面，而是您的Model的一个方面，因为它封装了业务逻辑。考虑一下您想要添加CC或使用另一个高级mailto功能的情况。如果您在Model中拥有逻辑，那么只需更改计算的可观察对象中的一个位置即可轻松完成。如果您在视图中进行了字符串连接，则必须更新您使用mailto链接的每个位置。 - Jeroen

无论品味如何，代码都是解决 OP 问题的一种有效方式，顺便说一下 ;-） - Jeroen

我从未说过它是无效的...只是我不同意你的陈述。你提到了mailto有功能，这一点很好，我认为一个binding handler是包含这些功能的适当方式，通过向其传递选项。我仍然认为这不是业务逻辑。你要给邮件的人有一个emailaddress，但这个人没有一个mailto链接；它不是模型的属性，也不是一个函数。它纯粹是一种将电子邮件地址显示为可点击的链接的方式。 - Kyeotic

@Tyrsius 抱歉，“有效性”评论并不是特别针对您，而是针对点击“此答案没有帮助”按钮的人。 - Jeroen