数据绑定电子邮件到mailto链接json [英] data binding email into mailto link json

问题描述

在我的查看页面中，我正在尝试放置一个用户的电子邮件地址，该地址是我从使用knockout.js进行数据绑定获得的，但是我无法使其正常工作.

In my view page I am trying to place an email address of a user that I get from data binding using knockout.js but I am having trouble getting it to work properly.

电子邮件代码

<a class="icon-envelope icon-white" data-bind="attr:{href:'mailto:' + Email},text:Email"></a>

这就是我所拥有的，当前结果是:图标，然后是旁边的电子邮件地址，当我单击电子邮件时，什么也没有发生.任何有用的提示，不胜感激.

This is what I have and the current result is: the icon then the email address next to it and when I click on the email nothing happens. Any helpful hints are appreciated.

推荐答案

对属性进行绑定时，通常通过提供属性名称来进行绑定，就像使用文本绑定一样:

When doing a binding to a property, you typically bind by giving the property name, just like you are with the text binding:

data-bind="text:Email"

但是要注意的一件事是，电子邮件是可观察的，而可观察的实际上是一种方法，而不是字符串.因此，如果您想直接在绑定中直接执行一些javascript，例如将"mailto:"与您的Email observable的值连接在一起，则需要调用observable来获取其值，例如:

But one thing to note is the Email is an observable, and an observable is actually a method, not a string. So if you want to start executing some javascript directly in your binding, such as concatenating "mailto:" with the value of your Email observable, you'll need to call the observable to get it's value, like this:

data-bind="attr:{href:'mailto:' + Email()}"

您可能要考虑的另一种方法是创建一个可计算的可观察值，以便您可以使用更简单的标记.您的视图模型中计算出的可观察值可能如下所示:

Another approach you might want to consider is to create a computed observable, so that you can have simpler markup. The computed observable in your viewmodel could look like this:

self.EmailLink = ko.computed(function() {
    return 'mailto:' + self.Email();
});

然后标记可能如下所示:

Then the markup could look like this:

<a data-bind="attr:{href:'mailto:' + EmailLink},text:Email"></a>

同时使用这两种方法进行曲调: http://jsfiddle.net/tlarson/tG7mg/

Working fiddle with both options: http://jsfiddle.net/tlarson/tG7mg/

这篇关于数据绑定电子邮件到mailto链接json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！