Multiple Custom Components Sharing ViewModel


#1

So I have added multiple instances of the same custom component onto a view and it looks like they share the same ViewModel. I am passing an argument to both, and that argument changes the underlying ViewModel of the component. When the second component is loaded it over writes the values set on the first component. Is this by design and I have to alter my thinking a bit? There was a similar topic Multiple Instance of Custom Component has same content but I did not quite understand the solution.

Example below…component is called - activitystream:activity-stream-view




<SegmentedBar.items>


</SegmentedBar.items>




<activitystream:activity-stream-view mode=“MY” />


<activitystream:activity-stream-view mode=“ALL” />


#2

I figured it out but would be interested in expert opinion if doing anything wrong here. Code below is what I have. The issue was I was instantiating my view model in line 2 of the view. When I changed it to instantiate a new View Model when the components onload was called it worked as expected.

var ActivityStreamViewModel = require("./activity-stream-view-model");
var activityStreamViewModel = null;
var application = require(“application”);

exports.onLoaded = function(args) {
const component = args.object;
activityStreamViewModel = new ActivityStreamViewModel();
component.bindingContext = activityStreamViewModel;
activityStreamViewModel.loadActivities(component.mode);
};