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.

getCollectionReactively

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.

call

You can find more information about this API feature here.

apply

You can find more information about this API feature here.

$bindToContext

This method binds the function to the reactive context. Any change in the function to the reactive context will be updated in the view accordingly.

Usage example

We want to create a user and then update the view that the user created successfully

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

  Accounts.createUser({username: "name", password: "123456"}, this.$bindToContext((err) => {
    if (!err)
      this.userCreateSuccess = true;
  }));
}]);

Without $bindToContext the view will not be updated

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, helpers and autorun methods.

helpers are used to set reactive collections:

For example, let's create a reactive collection:

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

  this.helpers({
    items: () => Items.find({})
  });

}]);

Whenever the Items collection changes, angular-meteor will update context and the view according to the change.

The method that you set on each helper must return a Mongo.Cursor

We will use autorun to set reactive variables that aren't collections:

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

  this.autorun(() => {
    this.itemsCount = Items.find({}).count();

    this.id = Meteor.userId();

    this.myFirstItem = Items.findOne({owner: this.getReactively("id")});
  });

}]);

itemsCount will be updated whenever Items collection length changes. id will be updated when a user will login/logout from the app. myFirstItem will be updated when Items collection changes or when the user login/logout.

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)
{
  $reactive(this).attach($scope);

  this.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)
{
  $reactive(this).attach($scope);
  this.searchText = '';

  this.helpers({
    users: function() {
      return Users.find({});
    }
  });

  this.subscribe('relevant_users', () => {
    return [
      this.getReactively("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});
  });
}