Question

我编写了一个自定义绑定处理程序来显示knockout中的bootstrap popover：

ko.bindingHandlers.popover = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {

        $(element).popover({
            html: true,
            content: function () { return $('#' + ko.unwrap(valueAccessor().template)).html(); },
            placement: "right",
            trigger: "manual",
            container: 'body'
        });

    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {

        if (valueAccessor().visible()) {
            $(element).popover('show');
            var popover = $("body .popover").last().get(0);
            ko.cleanNode(popover);
            ko.applyBindings(bindingContext.$rawData, popover);

        } else
            $(element).popover('hide');
    }
};

......完美无缺。

但是，当我尝试在同一个元素上绑定它两次时：

<input type="password" class="form-control" id="login-password" placeholder="Password" data-bind="textInput: login.password.input, hasFocus: login.password.focus, popover: { visible: login.showBadPassword, placement: 'right', template: 'bad-password-popover' }, popover: { visible: login.showThrottled, placement: 'right', template: 'throttled-popover' }" />

......它只绑定第二个。我猜这是因为它覆盖了第一个。

有没有办法将同一个东西绑定两次？

Answer 1

有一个基本问题，即您一次只能显示一个弹出窗口。您可以使用some technique to support more than one popover in a single element，但这不是标准。

如果您考虑到一次只能看到一个弹出框的限制，您可以使用这样的自定义绑定处理程序：

＆＃13;

ko.bindingHandlers.popover = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
		var values = ko.unwrap(valueAccessor());
        values.forEach(function(value) { value.visible(); });
        debugger;
        var visibleValue = values.find(function(value) { return value.visible();});
        
        if (visibleValue) {
            $(element).popover('destroy');
            $(element).popover({
                html: true,
                content:  $('#' + ko.unwrap(visibleValue.template)).html(),
                placement: ko.unwrap(visibleValue.placement),
                container: 'body'
            });
            $(element).popover('show');
            var popover = $("body .popover").last().get(0);
            ko.cleanNode(popover);
            ko.applyBindings(bindingContext.$rawData, popover);
        } else {
            $(element).popover('hide');
        };
    }
};

var vm = {
    triggerA: ko.observable(),
    triggerB: ko.observable()
}

ko.applyBindings(vm);

＆＃13;

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<input type="password"  
       data-bind="popover: 
                  [{visible: triggerA, placement: 'right', template: 'A'},
                  {visible: triggerB, placement: 'right', template: 'B'}]"/>

<script type="text/html" id="A">
    This is popover <b>A</b>
</script>
<script type="text/html" id="B">
    This is popover <b>B</b>
</script>
<br/>
<label>Trigger A<input type="checkbox" name="triggers" data-bind="checked: triggerA"></label>
<label>Trigger B<input type="checkbox" name="triggers" data-bind="checked: triggerB"></label>

＆＃13;

在此示例实现中，您可以指定多个不同的弹出框配置，但可见的一个将是可见的observable为true的第一个。您可以以服务方式修改此脚本：

在同一个popover中包含几个div，并使用不同的可见observable控制它们的可见性。这应该在init中完成，update中的代码应该停止销毁并重新创建popover
使用一些可用的技术在同一元素中显示多个popover
忘记这个实现，并在每个实现中使用隐藏元素和原始popvoer

Answer 2

如果您将一些“popoverId”作为绑定参数传递，则可以在数据中存储某些弹出窗口：

var newPopover = $(element).popover({ /* some potions */ });
$(element).data(ko.unwrap(valueAccessor().popoverId, newPopover);

在init中并获取更新中的popover：

var popover = $(element).data(valueAccessor().popoverId);

在knockoutjs中绑定自定义处理程序两次

2 个答案: