Reactivity in Lens

Lens uses an implementation of reactivity taken from Meteor.

Lens allows you to run reactive computations. A reactive computation is a function that keeps track of the data sources it uses, and automatically re-runs whenever those data sources changes. The simplest way to create a reactive computation is with Lens.Deps.autorun:

Lens.Deps.autorun(function() {
    $("#score").text(Lens.Session.get("playerScore"));
});

This snippet with update the contents of the score element whenever playerScore session variable changes. So you can update both the playerScore session variable and the score element by running Lens.Session.set("playerScore", newValue).

Lens.Deps.autorun returns a Computation that can be used to stop automatic recomputation, hook into the computation's lifecycle, or force recomputation.

Reactive Data Sources

This automatic recomputation is made possible because Lens.Session is a reactive data source. The reactive data sources available in Lens are:

Reactive Templates

Lens's templating system also uses reactivity. Templates are rendered inside a Lens.Deps.autorun block, so the DOM nodes rendered by a template will automatically update when the reactive data sources it uses change. See Templates for more on the Lens templating system.