Modal中的Bootstrap手風琴只能使用一次

Question

我在引導模式對話框中遇到手風琴問題。 我通過在標准'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');
};

看起來不錯，反應靈敏，但是手風琴只能工作一次……第二次，它什么也沒發生。

此函數調用的Modal ist：

    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嘗試了一個小提琴，在那里工作了...

Answer 1

該錯誤發生在自定義對話框實現中，但沒有弄清楚確切的位置。 我切換到BootstrapModalDurandalJS並在現有的js函數中調用了它：

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

我移交給的視圖模型的相應視圖需要如下所示：

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