2016-12-01 114 views
0

淘汰賽事件我有一個自定義的酥料餅的結合:自舉酥料餅

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時,它是空的。 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' 
     }) 
+1

看看[knockstrap(https://faulknercs.github.io/Knockstrap) - 它有助於縮小兩者之間的差距圖書館,支持popovers。 –

+1

由於綁定僅被調用一次,因此它內部的html元素一旦被銷燬,不會重新構建......我也會建議查看knockstrap – gkb

回答

0

將這樣的事情對你的工作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); 
    } 
};