Is there an OnShow event equivalent for Bootstrap data-toggle?

Question

A button controls visibility of a modal dialog. This occurs in the context of a forms engine, so the controlled modal dialog is determined by knockout binding.

<button type="button" class="btn btn-primary" data-toggle="modal" 
        data-bind="attr: { 
          id: 'attachment' + Metadata.FormFieldID, 
          'data-target': '#attachment-dialog' + Metadata.FormFieldID 
        }">

The dialog is itself bound to a viewmodel of a file system. If a value has already been supplied it is supposed to show the containing category and preselect the specified document.

This works fine but the viewmodel is prepped before the view is rendered, so scrolling the selection into view silently fails.

I could stop using data-toggle and explicitly control dialog visibility, but I would like to know whether there is any way to detect that the dialog has been toggled to visible so that I can trigger code to scroll the selection into view.

So there's the question: How can I detect that data-toggle has made a dialog visible using data-* attributes?

I am aware of

$('#myModal').on('shown.bs.modal', function (e) {
  // do something...
})

but this is a forms engine and the UI is rather dynamic so managing the event subscription would be mucky.

Answer 1

As far as I know: no, there is no such data- attribute available. Though, hardly conclusive evidence, the modal.js source code doesn't mention any special "data-" things I wasn't aware of.

However, I think the idiomatic way to integrate bootstrap modals with knockoutjs view models is through a custom binding handler. See e.g. this answer or this answer. You might need to extend those solutions to fix your issues with the scroll engine, but it would solve your issue of "the UI [being] rather dynamic", because knockoutjs handles event subscriptions and helps you do cleanup.