knockout.js - passing object to other viewmodel using pubsub?

Question

I've created 2 knockout components using the new knockout version 3.2 (and requirejs).

the first component contains a html template for showing a table of objects which are contained in an observable array in my viewmodel if the component.

define(["knockout", "text!./source-table.html", "knockoutpostbox"], function (ko, sourceTemplate) {

    function sourceViewModel() {

        var self = this;
        this.sourceEntries = ko.observableArray();
        this.selectedSourceEntry = ko.observable().publishOn("selectedSourceEntry");

    $.getJSON('./api/SourceFile').success(function (data, status, xhr) {
            console.log(data);
            var loadedSourceEntries= [];
            $.each(data, function (index, item) {
                loadedSourceEntries.push(new sourceEntry(item.ID, item.Order, item.SourceLocation, item.SourceFilename, item.Description, item.Contact, item.PostCommand, item.IsActive, item.Overwrite));
                console.log(item);
            });
            self.sourceEntries(loadedSourceEntries);
        });

        self.selectSourceEntry = function (data) {
            console.log(data);
            self.selectedSourceEntry(data.id);
        }
    };

    function sourceEntry(id, order, sourceLocation, sourceFilename, description, contact, postCommand, isActive, overwrite) {
        var self = this;

        self.id = id;
        ...
    }

    return { viewModel: sourceViewModel, template: sourceTemplate };
});

the second component contains a html template for showing a modal for editing the values of a selected item from my first component.

define(["knockout", "text!./destination-table.html", "knockoutpostbox"], function (ko, destinationTemplate) {

function destinationViewModel() {
    var self = this;
    this.destinationEntries = ko.observableArray();
    this.selectedDestinationEnty = ko.observable();

    this.sourceEntry = ko.observable()
            .subscribeTo("selectedSourceEntry", function (newValue) {
                $.getJSON('./api/Destinations/' + newValue).success(function (data, status, xhr) {
                    var loadedDestinationEntries = [];
                    $.each(data, function (index, item) {
                        loadedDestinationEntries.push(new destinationEntry(item.ID, item.SourceID, item.DestinationLocation, item.DestinationFilename));
                        console.log(item);
                    });
                    self.destinationEntries(loadedDestinationEntries);
            });
        });
    };

    function destinationEntry(id, sourceId, destinationLocation, destinationFilename) {
        var self = this;

        self.id = id;
        self.sourceID = sourceId;
        self.destinationLocation = destinationLocation;
        self.destinationFilename = destinationFilename;
    }

return { viewModel: destinationViewModel, template: destinationTemplate };
});

As you can see I've used pubsub for communicating the selected id from de first component. This is used to components that require an id for communicating to the server for getting details of the selected source item. However for editing the selected item all data is already known on the client so an extra ajax request shouldn't be the solution so I want to communicate the complete sourceEntry object.

is this possible using knockout-postbox's pubsub implementation?

The next question is maybe a simple one. The model of component only needs to be loaded when editing. A hidden section doesn't make sense with performance in mind. Is there a way to dynamically inject the component at runtime with knockout or do I need jquery to add the component dynamically. Whats the best practice here?