带有引导弹出框的淘汰赛事件答案

【问题标题】：Knockout event with bootstrap popover带有引导弹出框的淘汰赛事件
【发布时间】：2017-04-15 21:33:51
【问题描述】：

我有一个弹出框的自定义绑定：

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>

所以你第一次打开弹出框时 - 它显示为文本和点击事件工作正常。第二次打开弹出框时它是空的。当您隐藏弹出窗口时，B/c dom 被破坏。我怎样才能避免这种情况？我无法克隆 html，b/c 点击事件绑定会被破坏...

我的解决方案，请告诉我会出现什么问题？

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'
        })

【问题讨论】：

看看knockstrap - 它有助于弥合两个库之间的差距，支持弹出框。
由于绑定只被调用一次，所以其中的html元素一旦被破坏，就不会被重新构造...我也建议看看knockstrap

标签： twitter-bootstrap knockout.js

【解决方案1】：

这样的东西对你有用吗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);
  }
};

【讨论】：