使用淘汰赛自动显示 twitter 引导模式对话框

Question

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

问题：我使用了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 和将 selectedItem 设置为 null 的 deselectItem 函数。

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

我喜欢 Goran 的简单方法。唯一的问题是，html 在 Bootstrap 3+ 中不起作用。
现在默认启用“隐藏”类，并将其作为模态 div 上的类，将导致 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>

在本例中，click:$root.functionName 将调用 ViewModel 中的函数。

Answer 3

如果你应用以下模式，它会变得容易得多：

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

这样，您可以将表单返回到您的提交处理程序中，并可以在那里正确关闭它：

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

Answer 4

我已将此自定义绑定处理程序用于引导模式。同样在模态中，我添加了两个时刻日期选择器。但是当我使用这个绑定处理程序时，模式在点击事件上可见，但 datepicker div 也可见

如果我不使用这个并使用

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

模式工作得很好。

所以，我想在使用此绑定处理程序时存在一些问题并且无法获取它。

我评论了这个

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

这样做datepicker div 不会自动显示。当我单击它们时它们是可见的，但删除它的问题是如果我单击datepicker 之一，它会关闭引导模式。但它不应该关闭它。