Knockout Twitter Bootstrap Popover Binding

前端 未结 4 1793
礼貌的吻别
礼貌的吻别 2020-12-31 20:38

I am trying to create a custom binding for twitter boostrap popovers that references a template but I am having trouble with the binding part of the content inside of the po

4条回答
  •  借酒劲吻你
    2020-12-31 21:02

    Slightly modified dodbrian's example. The content is bind to an observable.

    https://jsfiddle.net/SergeyZhilyakov/0zxamcj6/14/

    var model = {
      linkText: "Hover me!",
      innerText: ko.observable("Please, wait...")
    };
    
    ko.bindingHandlers.popover = {
      init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var $element = $(element);
        var placement = allBindings.get("placement") || "top";
        var trigger = allBindings.get("trigger") || "hover";
        var content = allBindings.get("popover");
    
        $element.popover({
          placement: placement,
          trigger: trigger,
          content: content()
        });
    
        var popover = $element.data("bs.popover");
        content.subscribe(function(newValue) {
          popover.options.content = newValue;
          popover.setContent();
          popover.$tip.addClass(popover.options.placement);
        });
    
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
          $element.popover("destroy");
        });
      }
    };
    
    ko.applyBindings(model);
    
    setTimeout(function() {
      model.innerText("Done!");
    }, 3000);
    body {
      padding: 20px;
    }
    
    
    
    
    
    
    

提交回复
热议问题