[英]Knockoutjs click binding stopped working
我在使用ockoutjs單擊綁定時遇到了麻煩,似乎已停止工作,我不確定為什么。 單擊綁定位於模板中,如下所示。
我正在使用的版本
<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'));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.