Fork me on GitHub

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.

Param Type Details Required
context Object Context to set as reactive - this context will be used to hold the helpers locals and handle subscriptions, this method accepts controller's this context, or $scope. Yes

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

Param Type Details Required
scope Object This scope will be used as the reactive scope, and it will be updated when your data updates. Yes

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.

Param Type Details Required
fn Function Function that will run in the angular scope Yes

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.

Param Type Details Required
Callback Function Callback function that will run in each Autorun cycle. Yes

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