https://github.com/peerlibrary/meteor-reactive-field

Reactive field for Meteor
https://github.com/peerlibrary/meteor-reactive-field

meteor meteor-package reactivity tracker

Last synced: 5 days ago
JSON representation

Reactive field for Meteor

• Host: GitHub
• URL: https://github.com/peerlibrary/meteor-reactive-field
• Owner: peerlibrary
• License: bsd-3-clause
• Created: 2015-06-13T01:05:40.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2019-09-20T18:32:38.000Z (about 5 years ago)
• Last Synced: 2024-04-15T03:06:58.811Z (7 months ago)
• Topics: meteor, meteor-package, reactivity, tracker
• Language: JavaScript
• Homepage: https://atmospherejs.com/peerlibrary/reactive-field
• Size: 11.7 KB
• Stars: 12
• Watchers: 6
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Reactive field for Meteor

=========================

Reactive field for [Meteor](https://meteor.com/) provides an alternative syntax for

[`ReactiveVar`](http://docs.meteor.com/#/full/reactivevar_pkg):

```javascript

var field = new ReactiveField('initialValue');

console.log(field()); // prints 'initialValue' string

field('newValue');

console.log(field()); // prints 'newValue' string

```

So instead of `field.get()` and `field.set()`, you can simply call it as a function which (reactively) returns a

value, or call it with an argument to set the new value. Setter still returns the value.

Optionally, you can pass custom equality function:

```javascript

new ReactiveField('initialValue', function (a, b) {return a === b});

```

You can also enable storing the previous value stored in the reactive field using:

```javascript

// You can also pass it as a third argument when using custom equality function

var field = new ReactiveField('initialValue', true);

console.log(field()); // prints 'initialValue' string

field('newValue');

console.log(field()); // prints 'newValue' string

console.log(field.previous()); // prints 'initialValue' string

```

This is useful when you want to compare inside a computation how the value changed.

`field.previous()` is not reactive.

Adding this package to your [Meteor](http://www.meteor.com/) application adds the `ReactiveField` constructor into

the global scope.

Both client and server side.

Installation

------------

```

meteor add peerlibrary:reactive-field

```

Motivation

----------

The main motivation for this package is that you can assign reactive values to

[Blaze Components](https://github.com/peerlibrary/meteor-blaze-components) and then you can access them in the template

by simply doing `{{field}}` instead of `{{field.get}}`. And same for any other objects for which you create reactive

fields in the constructor and then you or have `this.field.get()` calls all around the code, which is ugly because if

you ever decide to convert `this.field` into a getter with some additional logic you have to change code everywhere.

Or you create a `this.field()` getter in advance, which calls `this._field.get()` for you, but that is again a lot of

work. So the easiest thing is to have reactive fields be methods to begin with so you can change them later on if

necessary while keeping backwards compatibility.

Related projects

----------------

* [reactive-var](https://atmospherejs.com/meteor/reactive-var) – the official Meteor reactive variable implementation

which this package just wraps, so the functionality is the same, just syntax how to use it is different

* [meteor-variable](https://github.com/awwx/meteor-variable) – an obsolete package offering similar syntax to this

package