Use knockout.js to prevent data from being loaded again on component change

The problem is that in the component definition you are using the constructor function method specified for the component viewModel, so every time you use the component it is actually instantiating a whole new viewmodel.

As a related question, currently it's loading twice calling the API (or loading the data in my example). Once per registered component. Nor should it be.

Note that it's called once because you're calling new viewModel()yourself, and once to instantiate the initial component that shows up when the extra viewmodel is instantiated. It wasn't logged twice because you registered two components - if you registered more components , you'd see that it was only logged twice.

A quick workaround is to specify the following using a shared object instance method :viewModel

var vm = new viewModel();

ko.components.register('summary', {
    viewModel: {instance: vm},
    template: '...'
});

ko.components.register('details', {
    viewModel: {instance: vm},
    template: '...'
});

ko.applyBindings(vm);

You have to decide if this is the right approach for your entire project in the long run, there are several ways to pass data into the component, this is just one of them.

Here is an updated fiddle , recorded only loading dataonce.