将实体绑定到模态

Posted 2023-03-27

【中文标题】将实体绑定到模态

【英文标题】：Binding an entity to a modal

【发布时间】：2018-12-31 07:39:07

【问题描述】：

我正在尝试将 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">&times;</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 以正确绑定它吗？到目前为止，这些字段都是空白的。

【参考方案1】：

由于引导模式是从 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');