2015-07-03 82 views
0

我在手風琴模式對話框中遇到了問題。 我把它實現它在迪朗達爾(V2.1)通過將此代碼添加到標準的「dialog.js」:Modal中的Bootstrap Accordion只能使用一次

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

看起來不錯,反應靈敏,但是手風琴作品只有一次......第二它被稱爲沒有任何反應。

模態通過此功能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小提琴,它有效...

+0

,你可以把它放在一個小提琴? – ramesh

回答

0

該錯誤是在自定義對話框實現的某處,沒有弄清楚究竟在哪裏。我切換到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>