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

Question

I've written a custom binding handler to show a bootstrap popover in knockout:

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

...which works perfectly.

However, when I try to bind it twice on the same element like this:

<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' }" />

...it only binds the second one. I'm guessing this is because it's overwriting the first one.

Is there a way to bind the same thing twice?

Answer 1

There is one basic problem, which is that you can only show one popover at a time. You could use some technique to support more than one popover in a single element , but that's not standard.

If you take into account this limitation of only being able to see one popover at a time, you can use a custom binding handler like this:

 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);

 <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>

In this sample implementation you can specify several different popover configurations, but the visible one will be the first whose visible observable is true. You could modify this script in serveal ways:

• include several divs in the same popover and control their visibility with the different visible observables. This should be done in the init , and the code in the update should stop destroying and recreating the popover
• use some of the available techniques to show more than one popover in the same element
• forget about this implementation, and use invisible elements with your original popvoer in each of them

Answer 2

If you pass some "popoverId" as binding parameter, you can store certain popup in the data:

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

in init and get the popover in update:

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