2

我为 twitter bootstrap popovers 创建了一个自定义绑定，用于在弹出窗口中显示具有两种方式绑定的数据，但如果每个弹出窗口之间的内容大小不同，则对齐关闭

http://jsfiddle.net/billpull/g6vH2/1

我不确定要在此处发布的相关代码会如此糟糕，只需发布​​整个内容，请检查小提琴以进行演示。

HTML

<!doctype html>
<html>
    <body>
        <br><br><br>
        <div data-bind="foreach: items">
            <span data-bind="text: label"></span>
            <input type="checkbox" data-bind="checked: required" />
            <button data-bind="popover: {template: 'settingsPopover', trigger: 'click'}">settings</button><br>
        </div>
        <script type="text/html" id="settingsPopover">
            <h4><span class="icon-cog">&nbsp;</span> Attributes</h4>
            <label>Label</label>
            <input type="text" data-bind="value: label, valueUpdate:'afterkeydown'" />
            <label class="checkbox">
                <input type="checkbox" data-bind="checked: required" /> Required
            </label>
            <ul data-bind="foreach: options">
                <li data-bind="text: $data"></li>
            </ul>
        </script>
    </body>
</html>

JS

function s4() {
  return Math.floor((1 + Math.random()) * 0x10000)
             .toString(16)
             .substring(1);
};
function guid() {
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
         s4() + '-' + s4() + s4() + s4();
}

// Bind Twitter Popover
ko.bindingHandlers.popover = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var $element = $(element);
        // read popover options 
        var popoverBindingValues = ko.utils.unwrapObservable(valueAccessor());

        // set popover title 
        var popoverTitle = popoverBindingValues.title;

        // set popover template id
        var tmplId = popoverBindingValues.template;

        // set popover trigger
        var trigger = popoverBindingValues.trigger;

        // get template html
        var tmplHtml = $('#' + tmplId).html();

        // create unique identifier to bind to
        var uuid = guid();
        var domId = "ko-bs-popover-" + uuid;

        // create correct binding context
        var childBindingContext = bindingContext.createChildContext(viewModel);

        // create DOM object to use for popover content
        var tmplDom = $('<div/>', {
            "class" : "ko-popover",
            "id" : domId
        }).html(tmplHtml);

        // set content options
        options = {
            content: tmplDom[0].outerHTML,
            title: popoverTitle
        };

        // Need to copy this, otherwise all the popups end up with the value of the last item
        var popoverOptions = $.extend({}, ko.bindingHandlers.popover.options, options);

        // bind popover to element click
        $element.bind(trigger, function (e) {
            $(this).popover(popoverOptions).popover('toggle');

            // if the popover is visible bind the view model to our dom ID
            if($('#' + domId).is(':visible')){
                ko.applyBindingsToDescendants(childBindingContext, $('#' + domId)[0]);
            }
        });

        // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice
        return { controlsDescendantBindings: true };
    },
    options: {
        placement: "right",
        title: "",
        html: true,
        content: "",
        trigger: "manual",
        container: 'body'
    }
};

var ItemModel = function (data) {
    var self = this;
    self.label = ko.observable(data.label);
    self.required = ko.observable(data.required);
    self.options = ko.observableArray(ko.utils.arrayMap(data.options, function(option) {
        return option;
    }));
}

var ViewModel = function () {
  var self = this;
  self.initItems = [
      {"label":"Item 1", "required": false, "options": [1,2,3,4,5,6]},
      {"label":"Item 2", "required": true, "options": [1,2,3]},
      {"label":"Item 3", "required": false, "options": []},
      {"label":"Item 4", "required": true, "options": [1,2,3,6]}
   ];

  self.items = ko.observableArray(ko.utils.arrayMap(self.initItems, function (item) {
      return new ItemModel(item);
  }));
};

$(function(){
    ko.applyBindings(new ViewModel);
 });

http://billpull.github.com/knockout-bootstrap/

4

3 回答 3

0

当您将单击绑定到您的弹出窗口绑定中的元素时，您初始化引导弹出窗口，然后将绑定应用到后代。这就是为什么 bootstrap popover 错误地计算它的位置（还没有嵌套的 li-s 所以它们的高度为零）。之后，淘汰赛会附加 li-s 元素和弹出框高度变化，您必须重新计算弹出框位置。

下一次单击后您重新初始化引导弹出框但不应用绑定，这种情况下弹出框位置计算正确。

于 2013-02-13T19:09:03.310 回答
0

演示

也许您可以为此使用 ko.applyBindingsToNode() 。首先渲染模板然后绑定弹出框。

$element.bind(trigger, function (e) {

    ko.applyBindingsToNode( tmplDom[0], {template : { name :'settingsPopover', data : viewModel}});            
    options = {
        content: tmplDom[0].outerHTML,
        title: popoverTitle
    };

    // Need to copy this, otherwise all the popups end up with the value of the last item
    var popoverOptions = $.extend({}, ko.bindingHandlers.popover.options, options);            
    $(this).popover(popoverOptions).popover('show');        
  //  }
});
于 2013-02-14T15:54:13.970 回答
0 
$element.bind(trigger, function (e) {

ko.applyBindingsToNode( tmplDom[0], {template : { name :'settingsPopover', data : viewModel}});            
options = {
    content: tmplDom[0].outerHTML,
    title: popoverTitle
};

// Need to copy this, otherwise all the popups end up with the value of the last item
var popoverOptions = $.extend({}, ko.bindingHandlers.popover.options, options);            
$(this).popover(popoverOptions).popover('show');        
//  }
});

弹出窗口由于某种原因永远不会关闭！:(

于 2013-06-17T21:20:15.030 回答