I am using angular in my meteor app and i am looking at this behavior when the record in a controller variable is automatically updated on the client whenever there is a change in that record on the server or if you change it from the db itself. Below is my code
Client.js
(function() {
angular.module('testApp')
.controller('TestController', TestController);
//inject dependencies required
TestController.$inject = ['$state', '$mdDialog', '$reactive', '$scope'];
function TestController($state, $mdDialog, $reactive, $scope) {
var vm = this;
vm.dineInArray = [];
// to attach the scope to reactive var
$reactive(vm).attach($scope);
vm.helpers({
tables: function() {
return Tables.find({});
}
});
var tableOrderCompSubscription = vm.subscribe('tableOrders');
Tracker.autorun(function() {
if (tableOrderCompSubscription.ready()) {
createDineInArray();
}
});
function createDineInArray() {
var tempArray = [];
var order;
vm.tables.forEach(function(table) {
order = Orders.findOne({ tableId: table._id });
if (order) {
table.orderId = order._id;
table.menuItems = order.menuItems;
}
tempArray.push(table);
});
vm.dineInArray = tempArray;
}
}
})();
Server.js
Meteor.publishComposite('tableOrders', {
find: function() {
// Find top ten highest scoring posts
return Tables.find({});
},
children: [{
find: function(table) {
// Find post author. Even though we only want to return
// one record here, we use "find" instead of "findOne"
// since this function should return a cursor.
return Orders.find({ tableId: table._id }, { limit: 1 });
}
}]
});
Now in the above code i am publishing a mixed object which is made up of two collections with the help of this meteor package. I get the data that is published via tableOrders collection in Tables and Orders collection on the client which is perfect. I do some processing on the data and then add all data to vm.dineInArray variable of controller inside the createDineInArray() function which is called when the subscription is ready. Below is my html that uses vm.dineInArray
HTML
<div flex layout="row" ng-controller="TestLayoutController as vm">
<!--Title bar end-->
<div layout="row" flex>
<md-content flex layout="row" layout-wrap>
<md-card class="table-card" md-ink-ripple ng-repeat="item in vm.dineInArray">
<div flex layout="row" class="table-card-body" layout-align="center center">
<p>{{item.pending}} / {{item.quantity}}</p>
</div>
<div layout="row" class="table-card-footer" layout-align="center center">
<h4>{{ item.name }}</h4>
</div>
</md-card>
</md-content>
</div>
</div>
Now suppose i have 1 record in Tables collection and hence i get 1 item in dineInArray that is rendered on my view. What happens is when i change the values in that record directly from mongo db via some GUI tool as Robomongo and update it, that corresponding record inside the dineInArray is automatically updated without me doing anything.
I know that if the helper function gets called every time something changes but the function that generates my array is not being called from helpers. I am calling it when Tracker indicates that subscription is ready and hence i can’t figure out how does the record in my array update itself with its latest value from Server.
I may be missing something obvious but i want to know the reason this occurs and how can i benefit/damage from it
Any help ?