Question

我在bootstrap模态对话框中遇到手风琴问题。我通过将此代码添加到标准'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');
};

看起来很好，反应灵敏，但手风琴只能工作一次......第二次被称为没有任何事情发生。

这个函数调用了模态：

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

我移交的viewmodel的相应视图需要如下所示：

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

Modal中的Bootstrap Accordion只能使用一次

1 个答案: