如何在Knockout.js的关联数据结构中调用自定义函数？

你的核心问题是故事数据的对象语法错误——直接在choices的对象里写匿名函数不符合JavaScript对象的键值对规则，导致函数根本没被正确存储，自然无法执行。以下是分步修复方案：

1. 修正故事数据的语法 #

给自定义函数添加键名（比如onSelect），保证对象结构合法：

"106": {
  "text": "[The game ended you Died.]",
  "image": "death face.gif",
  "choices": [
    {
      "choiceText": "Oops.",
      "storyLink": "1",
      "onSelect": function () { console.log("lmao"); }
    }
  ]
}

2. 更新ViewModel的onChoice函数 #

修改函数逻辑，让它既切换故事ID，又执行自定义函数：

var onChoice = (choice) => {
  // 执行自定义函数（如果存在）
  if (typeof choice.onSelect === 'function') {
    choice.onSelect();
  }
  // 切换到对应故事
  activeStoryId(choice.storyLink);
};

3. 清理HTML冗余代码 #

去掉按钮上无用的onclick="handleClick()"，避免和Knockout的click绑定冲突：

<div data-bind="with: activeStory">
  <img data-bind="attr: { src: image }">
  <button id="button" class="Button-data imgLink" data-bind="click: $root.onChoice, text: choiceText"></button>
</div>

为什么原来的写法失效？ #

你参考的数组示例是把函数作为数组元素，但你的代码是把函数直接放在对象里却没指定键名——JavaScript对象的成员必须是key: value形式，直接写function () {...}会触发语法错误，浏览器无法解析这个对象，所以自定义函数从未被正确添加到choice对象中。

按上述步骤修改后，点击按钮就会先执行console.log("lmao")，再切换到故事ID为1的内容。

内容的提问来源于stack exchange，提问作者CodingSkeletons