在Knockout.js中嵌套组件

Question

I have a knockout component that I'm using to encapsulate a bootstrap modal. It works great except for when I try to insert any content into the body of the modal. My first approach was putting html into the params.Content of the modal-dialog but I had a difficult type escaping the nested quotes. What I'd like to do is just nest the components like I have below and have the <test> element appear inside the modal body.

Knockout ViewModel for the page

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


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

Record Management page

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

modal-dialog.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;
    }
});

Answer 1

In Knockout 3.3 they added the ability to pass child nodes into a component and reference them trough $componentTemplateNode

Example using knockout 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>