javascript - Modal 中的 Bootstrap Accordion 只能工作一次

Question

我在 Bootstrap 模式对话框中遇到 Accordion 问题。我通过将这段代码添加到标准的“dialog.js”来在 durandal (v2.1) 中实现它:

dialog.addContext('bootstrap', {
    addHost: function (dialogInstance) {
        var body = $('body'),
            host = $('<div class="modal fade"><div class="modal-dialog"><div class="modal-content"></div></div></div>');
        host.appendTo(body);
        dialogInstance.host = host.find('.modal-content').get(0);
        dialogInstance.modalHost = host;
    },
    removeHost: function (dialogInstance) {
        $(dialogInstance.modalHost).modal('hide');
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
    },
    compositionComplete: function (child, parent, context) {
        var dialogInstance = dialog.getDialog(context.model),
            $child = $(child);
        $(dialogInstance.modalHost).modal({backdrop: 'static', keyboard: false, show: true});
        //Setting a short timeout is need in IE8, otherwise we could do this straight away
        setTimeout(function () {
            $child.find('.autofocus').first().focus();
        }, 1);
        if ($child.hasClass('autoclose') || context.model.autoclose) {
            $(dialogInstance.blockout).click(function () {
                dialogInstance.close();
            });
        }
    }
});
//rebind dialog.show to default to a new context
var oldShow = dialog.show;
dialog.show = function (obj, data, context) {
    return oldShow.call(dialog, obj, data, context || 'bootstrap');
};

看起来不错而且 react 灵敏，但 Accordion 只能工作一次......第二次调用它时没有任何反应。

该函数调用的模态列表:

    function clickAktion() {
    var kunden = selectedCustomers();
    var updates = availableItems.updates();
    updates[0].text = '(Bitte auswählen)';

    app.showDialog('viewModels/aktion', {kunden: kunden, updates: updates});
    }

任何建议都会很好。我猜错误出在 dialog.js 实现中的任何地方。我用纯 jquery 和 bootstrap 尝试了一个 fiddle ，它在那里工作......

Answer 1

错误出在自定义对话框实现的某个地方，没有弄清楚具体位置。我切换到BootstrapModalDurandalJS 并在我现有的 js 函数中调用它:

// some js function 'onClick'
app.showBootstrapDialog('viewModels/aktion', {customer: customer, updates: updates});

我提交的 View 模型的相应 View 需要如下所示:

    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            this is some header content
        <!-- maybe some closing button etc. -->
        </div>
        <div class="modal-body">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Panel 1 Heading
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            Panel 1 Content
                        </div>
                    </div>
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Panel 2 Heading
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            Panel 2 Content
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>