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?

To hopefully answer your last question: if you use an if/with binding, all underlying dom nodes will not be inserted into the DOM until your condition resolves to true (and they will be removed when the condition resolves to false later). So if those underlying dom nodes contain your component, it should not be loaded until you start editing. This in contrast to for example the visible binding, which will insert the DOM nodes immediatly, and thus also load the component immediatly. With/if bindings are a good way to manage lifetime of bindings, components etc. — Hans Roerdinkholder, Sep 04 '14 at 13:20
Also see http://knockoutjs.com/documentation/component-binding.html#disposal-and-memory-management — Hans Roerdinkholder, Sep 04 '14 at 13:32

passing object to other viewmodel using pubsub?

0 Answers0