显示Twitter的引导模式与自动淘汰赛对话(Show twitter bootstrap moda

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

问题：我用visible的结合，但竟然是繁琐的，而且它不能正常工作，因为它只显示对话框，无覆盖，并淡出（如果有的话）不工作。

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设置空。

Answer 1:

当我想通了，要做到这一点的（可能）最好的方法是创建一个KO结合处理程序，我把它叫做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>

Answer 2:

我喜欢Gorans简单的方法。唯一的问题是，该HTML不会引导工作3+。
“隐藏”类现在是默认启用的，并让它为模态的div类，将导致股利不显示。见http://www.bootply.com/bootstrap-3-migration-guide
这工作：

<div class="modal fade" data-bind="showModal:selectedItem, with:selectedItem">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h3 data-bind="text:TextItem"></h3>
            </div>
            <div class="modal-body">
                <form data-bind="submit:$root.accept">
                    <!-- editor for item here -->
                    <div class="form-group">
                        <label>Text</label>
                        <input type="text" class="form-control" data-bind="value: TextItem" placeholder="Text">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal">Luk</button>
                <button class="btn" data-bind="click:$root.accept">Gem</button>
            </div>
        </div>
    </div>
</div>

在这个例子中点击：$ root.functionName会打电话给您的视图模型的功能。

Answer 3:

如果您应用下面的模式它变得轻松了不少：

<form class="modal hide fade" data-bind="visible:selectedItem, with:selectedItem, submit:deselectItem">
    ...
</form>

这样，你得到的形式重新出现在你提交处理程序，并可以正常关闭它有：

deselectItem = function(form){
  ...
  $(form).modal('hide');
}

Answer 4:

我已经使用了引导模态这个自定义绑定处理程序。另外，在模式我已经添加了两个时刻日期选择器。但是当我使用这个绑定处理程序的模式是可见的单击事件，但日期选择器的div也可见

如果我不使用和使用

$('.classname_of_bootstrap_modal').modal('show')

该模式的工作完全正常。

所以，我想有一个使用此绑定处理程序，并没有能够得到它的一些问题。

我这个评论

$("input", element).focus();

在这样做的datepicker div的不会自动显示。他们是在当我点击他们，但在除去该是，如果我点击的一个问题可见的datepicker ，它关闭了引导模式。但它不应该关闭它。

文章来源: Show twitter bootstrap modal dialog automatically with knockout