在knockoutjs中兩次綁定自定義處理程序

Question

我編寫了一個自定義綁定處理程序來在淘汰賽中顯示引導彈出窗口：

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

有一個基本問題，即一次只能顯示一個彈出窗口。 您可以使用某種技術在單個元素中支持多個彈出框，但這不是標准的。

如果您考慮到一次只能看到一個彈出窗口的限制，您可以使用這樣的自定義綁定處理程序：

 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>

在這個示例實現中，您可以指定幾種不同的彈出框配置，但可見的將是第一個可見 observable 為 true 的。 您可以通過多種方式修改此腳本：

• 在同一個 popover 中包含多個 div，並使用不同的可見 observable 控制它們的可見性。 這應該在init完成，並且update的代碼應該停止銷毀和重新創建彈出框
• 使用一些可用的技術在同一元素中顯示多個彈出框
• 忘記這個實現，並在每個元素中使用帶有原始 popvoer 的不可見元素

Answer 2

如果您傳遞一些“popoverId”作為綁定參數，您可以在數據中存儲某些彈出窗口：

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

在 init 中並在更新中獲取彈出框：

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