Subscription to knockout Observable not working properly

Question

I am using knockout observables in my code.

My code looks like this

self.allAggs = ko.observableArray();
self.aggregatedDataSource = ko.observable( new oj.ArrayTableDataSource(self.allAggs, {idAttribute: 'itemName'}) );
self.aggregatedDataSource.subscribe(function(value) {
   console.log('Value changed for aggregatedDataSource');
   console.log(ko.toJS(value));
});

To insert data I am using below code

self.allAggs(newdata);

I have two issues here:

The data passed to self.allAggs as part of newdata is different than what is displayed on UI.

HTML code looks like this:

 <div id="aggregationContainer" data-bind="visible: isVisibleContainer($element.id)" class="blk" style="display:none;">
      <table id="aggTable" class="amc-full-width-table amc-max-height-table"
                       data-bind="ojComponent: {component: 'ojTable',
                        data: aggregatedDataSource,
                        display: 'grid',
                        columnsDefault: {sortable: 'enabled'}, columns: [
                        {headerText: $data.l10n_default('desktop-management.toolbar.option.',$data.selectedReportType()), field: 'itemName'},
                        {headerText: oj.Translations.getTranslatedString('desktop-management.report.column.hostCount'), renderer: hostCountRenderer, sortProperty: 'hostCount'}],
                        rootAttributes: {class:'amc-full-width-table'},
                        sort: $data.onVersionTableSort}">
       </table>
</div>

The control never goes inside subscribe function.

Please help me understanding where I am doing wrong or missing something.

The `ArrayTableDataSource` instance is wrapped by an observable, but will not be able to change this observable. Setting `allAggs` with new data wil trigger a subscription on `allAggs`, and potentially on a property of `ArrayTableDataSource` (which I can't tell for sure, because you haven't shared its source). — user3297291, Oct 24 '18 at 09:52
1. This is an oracle-jet question. That tag is important to mention. 2. The data passed to self.allAggs as part of newdata is different than what is displayed on UI. - If so, then please show us the 'expected' vs 'actual' results. 3. Observables monitor changes to its own value, not whatever is inside it. Its similar to how if you have an observablearray of objects, and you change a property of one of the objects, no change event is sent to subscribers — Ray, Oct 24 '18 at 10:57

score 0 · Answer 1 · edited Jan 14 '22 at 15:10

No need to wrap ArrayTableDataSource inside a knockout obserbavle. It serves no extra purpose of you.

The below code should help you.

self.allAggs = ko.observableArray([]); 
self.aggregatedDataSource = new oj.ArrayTableDataSource(self.allAggs, {idAttribute: 'itemName'});

And you can subscribe on knockout observable array like below

self.allAggs.subscribe(function(changes) {
   console.log('allAggs Value changed');
   console.log(ko.toJS(changes));
});

The above subscribe will be called only if there are structural changes in the array like add/delete elements. It will not be called if there is change in any of the array element state.

Subscription to knockout Observable not working properly

1 Answers1