Meteor Template States

Template states for Blaze. Forked from gwendall:template-states.

Features and differences to gwendall:template-states

Features

• provide state access across all Templates in the same easy way like the original
• let the developer decide about the helper access
• Minimalistic, clean and tested codebase

Differences are

• The state object is a directly references ReactiveDict, which is why access is determined by the ReactiveDict API ( set/get).
• There is not a helper created for every variable, that is pushed/removed to the state. Accessing via SpaceBars acts through the state helper (see examples). There are some cases, where you might not directly access the variable but name a helper just like the variable but process the value before returning it (e.g. decoration, proxy object etc.).
• There is a shortcut for Template.instance().state.<get/set> to be accessed in helpers.

Changelog

1.0.0

• update to Meteor 3 and latest dependencies
• breaking: remove Meteor < 3.x support

0.2.2

• Tests / coverage improved
• Template.toggle added (in addition to instance.toggle)
• refactored code style to standardjs

Installation

meteor add jkuester:template-states

Methods

Use with TemplateInstance

set / get

instance.state.set(key, value) - Sets a template state variable by key.

instance.state.get(key) - Gets a template state variable by key.

Example

Declare your states in onCreated hooks

1Template.post.onCreated(function() {
2	const instance = this;
3	instance.state.set('loading', false);
4})

The states are then available in your templates.

1Template.post.events({
2	'submit form': function(event, instance) {
3    	instance.state.get('loading', true);
4    	Meteor.call('post.create', { ... }, function(err, res) {
5      		instance.state('loading', false);
6      		// Do something else
7    	});
8 	}
9})

toggle

instance.toggle(key) - Toggles a boolean key between false and true (switches value to !value).

Note: if you apply this on non-boolean state variables, they become boolean.

Use with Template

Template.setState(key, value) - Sets the state on the current Template's instance.

Template.getState(key) - Returns the state on the current Template's instance.

Note: This calls Template.instance() and accesses the current instance's state.

Example

Declare your states in onCreated hooks

1Template.post.onCreated(function() {
2	const instance = this;
3	instance.state.set('loading', false);
4})

The states are then available in your helpers.

1Template.post.helpers({
2	loadComplete() {
3		const loading = Template.getState('loading');
4		// maybe check other things here....
5		return !loading;
6	}
7})

Use with Spacebars

Declare your states in onCreated hooks

1Template.post.onCreated(function() {
2	const instance = this;
3	instance.state.set('loading', false);
4})

Then use your state variable in your html content like this:

1  <template name="post">
2    {{#if (state 'loading')}}
3      Loading...
4    {{/if}}
5  </template>