为什么在淘汰赛中两次处理此事件? [英] Why is this event being handled twice in knockout?
问题描述
由于某些原因,以下代码使链接的click事件触发两次.我是淘汰赛的新手,我认为我的自定义绑定可能做错了.谁能告诉我我做错了什么? (顺便说一句,我之所以没有发布小提琴,是因为我无法在jsfiddle上包含来自github的映射插件.)
For some reason the below code makes the links' click event fire twice. I'm relatively new to knockout and I think I might have done my custom binding wrong. Can anyone tell me what I've done wrong? (Btw, the reason I didn't post a fiddle is that I can't include the mapping plugin from github on jsfiddle.)
JS:
ko.bindingHandlers.activityContent = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// This will be called when the binding is first applied to an element
// Set up any initial state, event handlers, etc. here
var content = document.createElement("p");
content.innerHTML = '<a href="javascript:void(0)" data-bind="text: user_name, click: $parent.NavigatePage.bind($data, \'profile\', user_id)"></a>';
element.appendChild(content);
ko.applyBindings(bindingContext, content);
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// This will be called once when the binding is first applied to an element,
// and again whenever the associated observable changes value.
// Update the DOM element based on the supplied values here.
}
};
var activities = ko.mapping.fromJS({Activities: [{
"user_id": "52b5042d572b94ceadf6asdf1a2a5bc",
"user_name": "Sean Templeton"
}, {
"user_id": "52b5042d57asfda2b94ce61a2a5bc",
"user_name": "Sean Templeton"
}, {
"user_id": "52b5042d572b94ce61a2a5bc",
"user_name": "Sean Templeton"
}, {
"user_id": "52b5042d5asdfasdf72b94ce61a2a5bc",
"user_name": "Sean Templeton"
}, {
"user_id": "52basdf5042d572b94ce6asdf1a2a5bc",
"user_name": "Sean Templeton"
}], NavigatePage: function(page, userId) { console.log(this); console.log(page); console.log(userId()); }});
ko.applyBindings(activities);
html:
<Ul data-bind="foreach: Activities">
<li data-bind="activityContent: $data"></li>
</ul>
推荐答案
删除init
中的ko.applyBindings(bindingContext, content);
行,并记住update
在init上运行一次,然后在每次更新时运行.
Remove the ko.applyBindings(bindingContext, content);
line in your init
, and remember that update
runs once on init, and then on each update.
此外,您还有更大的问题.在@nemesv上面提供的小提琴中,通过不从自定义绑定中删除ko.applyBindings()
,该列表甚至没有被迭代5次.
Also, you have a larger problem. In the fiddle given above by @nemesv, by not removing the ko.applyBindings()
from the custom binding, the list isn't even iterated the full 5 times.
一种不同的方法
除非在本示例之外您对activityContent
绑定有很好的计划,否则可以省去自定义绑定,只需在viewModel中的<li>
元素上注册一个委托事件.然后,您可以使用Knockout的ko.dataFor()
来确定单击了什么,然后调用NavigatePage().这种方法性能更高,不需要自定义绑定.
Unless you have great plans for the activityContent
binding beyond this example, you could dispense with the custom binding and simply register a delegate event on your <li>
element in your viewModel. You could then use Knockout's ko.dataFor()
to determine what's been clicked on, and then call NavigatePage(). This approach is far more performant and does not require a custom binding.
您可以在此处中了解有关委托事件的信息.
You can read about delegate events here.
这篇关于为什么在淘汰赛中两次处理此事件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!