Ich muss einen modalen Dialog zum Bearbeiten eines Elements in einer App mit nur einer Seite anzeigen, wenn ich ein Element aus der Liste auswähle.

Problem: Ich habe verwendetvisible Bindung, aber das stellte sich als umständlich heraus, und es funktioniert nicht richtig, da es nur Dialoge zeigt, ohne Overlay und Fade (falls vorhanden) funktioniert nicht.

HTML:

<div class="modal hide fade" data-bind="visible:selectedItem, with:selectedItem">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 data-bind="text:name"></h3>
  </div>
  <div class="modal-body">
    <form data-bind="submit:deselectItem">
        <!-- editor for item here -->
    </form>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-bind="click:deselectItem">Close</a>
  </div>
</div>

Das Modell hierfür ist ein einfaches Objekt mit der Funktion observableList, obervable selectedItem und deselectItem, die selectedItem auf null setzt.