KnockoutJS data-bind attr to a function doesn't seem to work

Question

I'm trying to data-bind an attribute with KnockoutJS to a function, so I can do some string manipulation, and struggling to get it to work.

The following works perfectly fine:

<div data-bind="html: doSomething($data)></div>

However, the following does not:

<a data-bind="attr: { src: doSomething($data)}">link</a>

Could somebody please help me get this working?

Answer 1

There are possibly a couple of problems that you might be facing.

First, you should use href instead of src for an anchor's link.

Second, where does doSomething live? Is it a global function? Does it live on each item in an array or on the top-level view model. If it lives on the root view model, then you can refer to it using $root.doSomething from within the scope of an item that you are doing a foreach on.

Here is a sample: http://jsfiddle.net/rniemeyer/WbxPm/