twitter-bootstrap - 使用 knockout 自动显示 twitter Bootstrap 模式对话框

Question

当我从列表中选择一个项目时，我需要在单页应用程序中显示用于编辑项目的模式对话框。

问题:我使用了visible绑定(bind)，但结果很麻烦，而且它不能正常工作，因为它只显示对话框，没有覆盖，并且淡入淡出(如果有的话)不起作用。

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>

模型是带有 observableList、obervable selectedItem 和将 selectedItem 设置为 null 的 deselectItem 函数的简单对象。

Answer 1

正如我所知道的，(可能)最好的方法是创建一个 ko 绑定(bind)处理程序，我称之为 showModal :

ko.bindingHandlers.showModal = {
    init: function (element, valueAccessor) {},
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal('show');
            // this is to focus input field inside dialog
            $("input", element).focus();
        }
        else {
            $(element).modal('hide');
        }
    }
};

用法是这样的:

<div class="modal hide fade" data-bind="showModal: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>