ReactiveContext

ReactiveContext is a class that manages the reactivity of a context, and manages the subscriptions and helpers. Instance of this class is returned from the $reactive service after using it.

Using this object you can define:

• Meteor Subscriptions - wraps Meteor.subscribe and provides the acknowledgment when the subscription updates.
• View Helpers - you can define helpers and use them in your view, and Angular-Meteor will take care of your view reactivity.

Methods

constructor

The constructor is private, and called by using $reactive service.

attach

This method attaches the context to scope - we need to attach to scope in order to $apply it when changes are made, in order to update the view.

This method is only needed when using this context (when using controllerAs or angular2now).

getReactively

You can find more information about this API feature here.

helpers

You can find more information about this API feature here.

subscribe

You can find more information about this API feature here.

autorun

You can find more information about this API feature here.

stop

This method takes care of stopping every subscribe, autorun and helpers registration you created.

Note that this method is called automatically when using $scope with your reactive context, which means you need to call this method manually when you do not use $scope.

Usage examples

The core of the usage with this object, is the subscribe and helpers methods.

For example, let's create a reactive variable:

angular.module('myApp', []).controller('MyCtrl', ['$scope', '$reactive', function($scope, $reactive)
{
  let reactiveContext = $reactive(this).attach($scope);

  reactiveContext.helpers({
    myName: 'Dotan'
  });

  // This will print your actual value, and you can use it also in your view!
  console.log(this.myName);
}]);

And when you will modify the value of this.myName, it will cause Tracker.Autorun to invalidate and run your reactive logic again.

Also, it is possible to create a collection helpers that returns MongoDB cursor, using helpers:

angular.module('myApp', []).controller('MyCtrl', ['$scope', '$reactive', function($scope, $reactive)
{
  let reactiveContext = $reactive(this).attach($scope);

  reactiveContext.helpers({
    allUsers: function() {
      return Users.find({});
    }
  });

  // This will print the whole collection, as a normal JavaScript array!
  console.log(this.allUsers);
}]);

• subscribe - Use this to subscribe to data from your Meteor server side - you need to provide the name of the subscription and a function that will return an array with the subscription arguments (as defined in the publication in the server side).

Using subscribe you can register to data, it wraps Meteor.subscribe, but it also makes sure to make you view reactive when there are changes.

This is an example for registering to subscription named relevant_users with some parameters:

angular.module('myApp', []).controller('MyCtrl', ['$scope', '$reactive', function($scope, $reactive)
{
  let reactiveContext = $reactive(this).attach($scope);

  reactiveContext.subscribe('relevant_users', () => {
    return [
      'example' // This is an arguments that will be used in the subscription
    ]
  });
}]);

Combining both of the feature we just explained, we can create a reactive view with search, that updates the subscription:

angular.module('myApp', []).controller('MyCtrl', ['$scope', '$reactive', function($scope, $reactive)
{
  let reactiveContext = $reactive(this).attach($scope);

  reactiveContext.helpers({
    searchText: '',
    users: function() {
      return Users.find({});
    }
  });

  reactiveContext.subscribe('relevant_users', () => {
    return [
      this.searchText
    ];
  });
}]);

And in our view, we can use ng-repeat to display the list of the users, and use ng-model to update the search text:

<div ng-controller="MyCtrl as vm">
  Filter users: <input type="text" ng-model="vm.searchText" /> <br /><br />
  Relevant Users:
  <ul>
    <li ng-repeat="user in vm.users">{ { user.name } }</li>
  </ul>
</div>

And this is our simple publication in the server side:

if (Meteor.isServer) {
  Meteor.publish("relevant_users", function (userName) {
    return Users.find({ name: userName});
  });
}