Knockoutjs 单击绑定停止工作

Knockoutjs click binding stopped working

本文关键字：停止工作 绑定 单击 Knockoutjs      更新时间：2023-09-26

我在 knockoutjs 点击绑定时遇到问题，它似乎已经停止工作，我不知道为什么。单击绑定位于模板中，如下所示。

我正在使用的版本 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>

我的模板

<ul id="runners" data-bind="template: {name:'runner-template', foreach:employees}"></ul>
<script type="text/html" id="runner-template">
   <li class="runner" data-bind="click: runnerSelected.bind($data, Id(), Name())"> 
      <span data-bind='text: Name'></span>
   </li>
</script>
我的

JavaScript 函数存在于我的视图模型之外 

function runnerSelected(id, name) {    
   sponsoredRunner.id = id;
   sponsoredRunner.name = name;
   $("#sponsoredRunner").html(name);
   console.log('~~ click on selected runner ['+JSON.stringify(sponsoredRunner)+']');
}

我从异步调用加载视图模型 

var temp = {};
temp.employees = [];
for(var i=0 ; i<result.employees.length ; i++) {
   temp.employees.push(result.employees[i]);
}
var results = ko.mapping.fromJS(temp);
ko.cleanNode(document.getElementById('runners'));
ko.applyBindings(results, document.getElementById('runners'));

控制台中没有输出让我知道问题出在哪里。

有什么想法吗？

这个问题无关，我在 setTimeout 上使用 jquery.blur（） 隐藏了 ul 元素。超时是 100 毫秒，事实证明，这是在比赛中进行 jquery 和淘汰赛。

在此过程中，代码也变得更加干净，因此发布是为了完整性。

<ul id="runners" data-bind="template: {name:'runner-template', foreach:employees}"></ul>
<script type="text/html" id="runner-template">
   <li class="runner" data-bind="click: $parent.runnerSelected"> 
      <span data-bind='text: Name'></span>
   </li>
</script>

还有javascript.. 

result.runnerSelected = function(data,event) {
   $("#runners").hide(); 
   sponsoredRunner.id = data.Id;
   sponsoredRunner.name = data.Name;
   $("#sponsoredRunner").html(sponsoredRunner.name);   
}
ko.cleanNode(document.getElementById('runners'));
ko.applyBindings(result, document.getElementById('runners'));
相关文章：