Question

我试图将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正确绑定它的任何内容吗？到目前为止，这些字段为空白。

Answer 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');
}

将实体绑定到模式

1 个答案: