当我从列表中选择一个项目时,我需要在单页应用程序中显示编辑项目的模式对话框。
问题:我使用了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>
它的模型是一个简单的对象,带有observableList、obervable和将selectedItem设置为null的deselectItem函数。
发布于 2013-02-04 17:39:49
据我所知,(可能)最好的方法是创建一个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">×</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>
发布于 2013-11-01 00:07:31
如果应用以下模式,它会变得容易得多:
<form class="modal hide fade" data-bind="visible:selectedItem, with:selectedItem, submit:deselectItem">
...
</form>
这样,您就可以在提交处理程序中重新获得表单,并在那里正确地关闭它:
deselectItem = function(form){
...
$(form).modal('hide');
}
发布于 2014-06-30 19:34:08
我已经为引导模式使用了这个自定义绑定处理程序。另外,在模式中,我添加了两个时刻日期选择器。但是当我使用这个绑定处理程序时,在click事件上模态是可见的,但是datepicker div也是可见的
如果我不使用这个并使用
$('.classname_of_bootstrap_modal').modal('show')
该模式工作得非常好。
所以,我猜在使用这个绑定处理程序时有一些问题,并且不能获得它。
我对此进行了评论
$("input", element).focus();
执行此操作时,datepicker
div不会自动显示。当我单击它们时,它们是可见的,但删除它的问题是,如果我单击其中一个datepicker
,它将关闭引导模式。但它不应该关闭它。
https://stackoverflow.com/questions/14683953
复制相似问题