在 knockoutjs 中嵌套组件

Nesting components in knockoutjs

本文关键字:组件 嵌套 knockoutjs      更新时间:2023-09-26

我有一个淘汰组件,我用它来封装引导模式。它工作得很好,除非我尝试将任何内容插入模态的正文中。我的第一个方法是将html放入参数中。模态对话框的内容,但我有一个困难的类型来转义嵌套引号。我想做的只是嵌套下面这样的组件,并让<test>元素出现在模态主体中。

挖空视图页面的模型

function recordManagement() {
    var recordManagementVM = function () {
        self.SearchExisting = function() {
           console.log(response);
        }
    }; //--End VM --

ko.applyBindings(new recordManagementVM(), document.getElementById("recordmanagement"));

"记录管理"页

<div id="recordManagement">
    <modal-dialog params="
        {ModalId: 'searchExisting', 
        Title: 'Search Existing', 
        CancelText: 'Cancel',
        SaveEvent: SearchExisting,
        SaveText: 'Save',
        Content: ''}">
        <test></test>
    </modal-dialog>
</div>

模态对话框.js

ko.components.register('modal-dialog', {
    template: '<div data-bind="attr: {id: ModalId}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"> '
        <div class="modal-dialog"> '
            <div class="modal-content"> '
                <div class="modal-header"> '
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button> '
                    <h3 class="modal-title" data-bind="html: Title"></h3> '
                </div> '
                <div class="modal-body" data-bind="html: Content"> '
                </div> '
                <div class="modal-footer"> '
                    <button type="button" class="btn btn-default" data-dismiss="modal" data-bind="text: CancelText">Cancel</button> '
                    <button type="button" class="btn btn-primary" data-bind="text: SaveText, click: SaveEvent">Save</button> '
                </div> '
            </div> '
        </div> '
    </div>',
    viewModel: function (params) {
        console.log(params);
        var self = this;
        self.Title = ko.observable(params.Title);
        self.Content = ko.observable(params.Content);
        self.ModalId = ko.observable(params.ModalId);
        self.CancelText = ko.observable(params.CancelText);
        self.SaveText = ko.observable(params.SaveText);
        self.SaveEvent = params.SaveEvent;
    }
});

在 Knockout 3.3 中,他们添加了将子节点传递到组件中并通过$componentTemplateNode引用它们的功能

使用挖空 3.4 的示例:

ko.components.register('modal-dialog', {
  template: '<div data-bind="attr: {id: ModalId}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"> '
        <div class="modal-dialog"> '
            <div class="modal-content"> '
                <div class="modal-header"> '
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button> '
                    <h3 class="modal-title" data-bind="html: Title"></h3> '
                </div> '
                <div class="modal-body" data-bind="template:{nodes:$componentTemplateNodes}"> '
                </div> '
                <div class="modal-footer"> '
                    <button type="button" class="btn btn-default" data-dismiss="modal" data-bind="text: CancelText">Cancel</button> '
                    <button type="button" class="btn btn-primary" data-bind="text: SaveText, click: SaveEvent">Save</button> '
                </div> '
            </div> '
        </div> '
    </div>',
  viewModel: function(params) {
    console.log(params);
    var self = this;
    self.Title = ko.observable(params.Title);
    self.Content = ko.observable(params.Content);
    self.ModalId = ko.observable(params.ModalId);
    self.CancelText = ko.observable(params.CancelText);
    self.SaveText = ko.observable(params.SaveText);
    self.SaveEvent = params.SaveEvent;
  }
});
var recordManagementVM = function() {
  self.SearchExisting = function() {
    console.log(response);
  }
}; //--End VM --
ko.applyBindings(new recordManagementVM(), document.getElementById("recordmanagement"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<div id="recordManagement">
  <modal-dialog params="
        {ModalId: 'searchExisting', 
        Title: 'Search Existing', 
        CancelText: 'Cancel',
        SaveEvent: SearchExisting,
        SaveText: 'Save',
        Content: ''}">
    <div>Testing Child Nodes</div>
  </modal-dialog>
</div>