twitter-bootstrap 使用淘汰赛自动显示 twitter bootstrap 模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14683953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show twitter bootstrap modal dialog automatically with knockout
提问by Goran Obradovic
I need to show modal dialog for editing item in single page app when I select an item from list.
当我从列表中选择一个项目时，我需要在单页应用程序中显示用于编辑项目的模式对话框。
Problem: I used visiblebinding, 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.
问题：我使用了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">×</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>
Model for this is simple object with observableList, obervable selectedItem, and deselectItem function which sets selectedItem to null.
此模型是具有 observableList、obervable selectedItem 和将 selectedItem 设置为 null 的 deselectItem 函数的简单对象。
回答by Goran Obradovic
As I figured out, the (probably) best way to do this is to create a ko binding handler, I called it showModal:
正如我发现的那样，（可能）最好的方法是创建一个 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');
}
}
};
Usage is like this:
用法是这样的：
<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">×</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>
回答by Hersker
I like Gorans simple approach. Only problem is, that the html will not work in Bootstrap 3+.
The "hide" class is now enabled by default, and having it as class on modal div, will result in the div not showing. See http://www.bootply.com/bootstrap-3-migration-guide
This works:
我喜欢 Gorans 的简单方法。唯一的问题是，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">×</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>
In this example click:$root.functionName will call a function in your ViewModel.
在这个例子中 click:$root.functionName 将调用你的 ViewModel 中的一个函数。
回答by Haridarshan
I have used this custom binding handler for bootstrap modals. Also in the modal i have added two moment datepicker. but when I use this binding handler the modal is visible on click event but datepicker div also visible
我已将此自定义绑定处理程序用于引导模式。同样在模态中，我添加了两个时刻日期选择器。但是当我使用这个绑定处理程序时，模态在点击事件中可见，但日期选择器 div 也可见
if I don't use this and use
如果我不使用它并使用
$('.classname_of_bootstrap_modal').modal('show')
The modal works perfectly fine.
模态工作得很好。
So, i guess there is some issue in using this binding handler and not able to get it.
所以，我想在使用这个绑定处理程序时存在一些问题并且无法获得它。
I commented this
我评论了这个
$("input", element).focus();
On doing that the datepickerdiv's are not displaying automatically. they are visible on when i click on them but issue on removing this is if i click one of the datepicker, it closes the bootstrap modal. but it shouldnt close it.
这样做时，datepickerdiv 不会自动显示。当我点击它们时它们是可见的，但删除它的问题是如果我点击其中一个datepicker，它会关闭引导模式。但它不应该关闭它。
回答by bert bruynooghe
It gets a lot easier if you apply the following pattern:
如果您应用以下模式，它会变得容易得多：
<form class="modal hide fade" data-bind="visible:selectedItem, with:selectedItem, submit:deselectItem">
...
</form>
That way, you get the form back in your submit handler and can properly close it there:
这样，您将表单返回到您的提交处理程序中，并可以在那里正确关闭它：
deselectItem = function(form){
...
$(form).modal('hide');
}
