Data Binding Email Into Mailto Link Json

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. Code for email

Solution 1:

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"

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:

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

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