Nesting components in knockoutjs

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>