当我从列表中选择一个项目时，我需要显示在单页应用程序中编辑项目的模态对话框。
问题：我使用可见的绑定，但是这样做很麻烦，它不能正常工作，因为它只显示对话框，没有覆盖，并且渐变(如果有的话)不起作用。
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和deselectItem函数的简单对象，它将selectedItem设置为null。
解决方法
正如我想到的，(可能)最好的方法是创建一个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>