我有一个针对popover的自定义绑定:
init = (element: any, valueAccessor: () => any, allBindingsAccessor?: KnockoutAllBindingsAccessor, viewModel?: any, bindingContext?: KnockoutBindingContext) => {
var $elem = $(element);
var popover = $elem.popover({
placement: 'auto',
content: function () {
return $('#' + valueAccessor() + " > div");
},
html: true,
container: 'body'
})
}
<div class="pover">
<div>
<span data-bind="click: function(){alert('213')}">test</span>
</div>
</div>
因此,您第一次打开popover-它显示为文本,并且click事件可以正常工作。第二次打开弹出窗口时,它是空的。隐藏弹出窗口时,B / c dom被破坏了。我如何避免这种情况?我无法克隆html,b / c click事件绑定将被破坏...
我的解决方法是,请告诉我怎么可能出问题?
var popover = $elem.popover({
placement: 'auto',
content: function () {
$("#single-popover").remove();
$('body').append('<div id="single-popover">' + $("#popoverTemplate").html() + '</div>');
ko.cleanNode($('#single-popover')[0]);
ko.applyBindings(bindingContext, $('#single-popover')[0]);
return $('#single-popover');
},
html: true,
container: 'body'
})
这样的事情会为您工作http://jsfiddle.net/LkqTU/32668/
ko.bindingHandlers.popover = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
ko.bindingHandlers.value.init(element, valueAccessor, allBindings);
var source = allBindings.get('popoverTitle');
var sourceUnwrapped = ko.unwrap(source);
$(element).popover({
trigger: 'focus',
title: sourceUnwrapped,
placement: 'auto',
content: function() {
return ko.unwrap(valueAccessor())
},
html: true,
container: 'body'
});
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var value = valueAccessor();
ko.bindingHandlers.value.update(element, valueAccessor);
}
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句