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).

helpers

This method expect to get an object with definitions, it's usage is very similar to Meteor's helpers. Each property in the definition defines a different behavior of your object:

• Using a function - this function will execute each Autorun invalidate - very useful for creating a reactive collection to use in your view.
• Using a object/primitive/string - this will create a reactive variable that you can usem and every change of this object will cause a Autorun invalidate.

The return value of this method is this - in order to provide ability to chain the angular-meteor logic (reactiveContext.helpers(...).subscribe(...)).

subscribe

This method is a wrapper for Meteor.subscribe, just with reactivity ability - the subscription will be updated when your reactive variables changes.

autorun

This method is a wrapper for Tracker.autorun, that will be available for clean angular-meteor usage.

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});
  });
}