How to set image's click attribute in data-bind

Question

View:

<td style="white-space: nowrap;">
   <img data-bind="attr: { onclick: PlaySounds }" src="/Images/audioGreen.png" alt="Pronounce word" title="Pronounce word" style="cursor: pointer" />
   <a data-bind="attr: { href: GoogleQuery }" target="_blank">
      <img src="/Images/googleIcon.png" alt="Google Search" title="Google Search" style="cursor: pointer" />
   </a>
</td>

Knockout View Model:

function DictionaryEntry() {
   var self = this;
   self.Simplified = ko.observable("");
   self.Traditional = ko.observable("");
   self.Phonetic = ko.observable("");
   self.Definition = ko.observable("");

   self.GoogleQuery = ko.computed(function () {
       return "http://www.google.com/search?q=" + self.Simplified();
   }, self);

   self.PlaySounds = ko.computed(function () {
       return "playSounds('" + self.Phonetic() + "')";
   }, self);
}

Info about "attr" binding: "http://knockoutjs.com/documentation/attr-binding.html"

Error Details:

Microsoft JScript runtime error: Unable to parse bindings. Message: ReferenceError: 'PlaySounds' is undefined; Bindings value: attr: { onclick: PlaySounds }

Not sure where I am going wrong. If possible, binding directly without using the ko.computed values would be a bonus. A solution either way would be greatly appreciated.

Answer 1

You do not need to use an attr binding to bind a function to a click, for this you should use the Knockout click binding:

<img data-bind="click: playSounds" src="/Images/audioGreen.png"
     alt="Pronounce word" title="Pronounce word" style="cursor: pointer" />

Answer 2

I'm answering my own question... a bit late, but I hope it helps someone else:

What I did to get it working was using: click: $root.PlaySounds and have the function in my main ViewModel.. not the DictionaryEntry (child) model.. like this:

self.PlaySounds = function (entry) {
                playSounds(entry.Phonetic);
                return false;
            };

That worked nicely.

Answer 3

The binding you want is click: function() { playSounds(Phonetic()) }. If you want us to actually debug specific errors, please provide an example of your code (in jsfiddle, for example).