自动显示Twitter Bootstrap模态对话框，并具有剔除功能 [英] Show twitter bootstrap modal dialog automatically with knockout

问题描述

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

I need to show modal dialog for editing item in single page app when I select an item from list.

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

Problem: I used visible binding, but that turned out to be cumbersome, and it does not work properly, as it shows only dialog, without overlay, and fade (if any) does not work.

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和deselectItem函数的简单对象，该函数将selectedItem设置为null.

Model for this is simple object with observableList, obervable selectedItem, and deselectItem function which sets selectedItem to null.

推荐答案

我发现，(可能)最好的方法是创建一个ko绑定处理程序，我称它为showModal:

As I figured out, the (probably) best way to do this is to create a ko binding handler, I called it 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>

这篇关于自动显示Twitter Bootstrap模态对话框，并具有剔除功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！