knockout.js - 如何在数据绑定中设置图像的点击属性

Question

看法：

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

淘汰赛视图模型：

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);
}

关于“attr”绑定的信息：“ http://knockoutjs.com/documentation/attr-binding.html ”

错误详情：

Microsoft JScript 运行时错误：无法解析绑定。消息：ReferenceError：“PlaySounds”未定义；绑定值：attr: { onclick: PlaySounds }

不知道我哪里出错了。如果可能，直接绑定而不使用 ko.computed 值将是一个好处。无论哪种方式的解决方案将不胜感激。

Answer 1

您不需要使用attr绑定来将功能绑定到点击，为此您应该使用 Knockoutclick绑定：

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

Answer 2

我正在回答我自己的问题......有点晚了，但我希望它可以帮助别人：

我为使其工作所做的工作是使用：click: $root.PlaySounds并在我的主 ViewModel 中使用该功能..而不是 DictionaryEntry（子）模型.. 像这样：

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

那效果很好。

Answer 3

你想要的绑定是click: function() { playSounds(Phonetic()) }. 如果您希望我们实际调试特定错误，请提供您的代码示例（例如，在 jsfiddle 中）。