我试图将KO视图模型绑定到引导模式,但似乎缺少指示KO填充输入字段的内容。
这是我到目前为止所拥有的。
模式模板:
<script type="text/html" id="edit">
<div class="modal fade modal-template" tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" data-bind="value: Id">
<div class="row">
<div class="col-sm-4">
Name
</div>
<div class="col-sm-8">
<input type="text" class="form-control" data-bind="value: Name" />
</div>
</div>
<br>
<div class="row">
<div class="col-sm-4">
Description
</div>
<div class="col-sm-8">
<textarea style="resize: none;" class="form-control" data-bind="value: Description" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success">Save</button>
<button type="button" data-dismiss="modal" class="btn btn-danger">Cancel</button>
</div>
</div>
</div>
</div>
</script>
我有一个表也映射到KO视图模型。用于呈现表中项目的display
模板是这样的:
<script type="text/html" id="display">
<td data-bind="text: Name"></td>
<td data-bind="text: Published"></td>
<td data-bind="text: PublishedOn"></td>
<td>
<div class="btn-toolbar">
<button type="button" class="btn btn-default btn-space" data-bind="click: $root.showModal"><span class="fas fa-edit"></span></button>
</div>
</td>
</script>
视图模型:
this.viewModel = {
workflowCollection: ko.observableArray(),
showModal: function (model) {
//this creates an instance of a bootstrap modal, using the html content of the template instead of the #edit element itself.
$($('#edit').html()).modal('show');
}
};
在showModal
中,我收到为其打开了模式的实体,但是我需要进一步指定KO正确绑定它的任何内容吗?到目前为止,这些字段为空白。
答案 0 :(得分:0)
由于引导模态是由尚未被剔除绑定的DOM中的全新元素创建的,因此您需要通过将新元素传递到ko.applyBindings
来专门绑定它。
showModal: function (model) {
//this creates an instance of a bootstrap modal, using the html content of the template instead of the #edit element itself.
var myModal = $($('#edit').html());
ko.applyBindings(model, myModal[0]);
myModal.modal('show');
}