meteor add zuzel:reactive-query

https://atmospherejs.com/zuzel/reactive-query

DEMO

reactive-query

Reactive query is a meteor package that makes it easy to serialize application state in URL query params Can save data as a query param without ruining URL.

#Example:

reactiveQuery-config.js

//define keys for query
ACTIONS_QUERY = {
    IS_MODAL_OPEN: {
        name: "m",
        isValid: _.isBoolean
    }
}
Actions = new ReactiveQuery("actions", ACTIONS_QUERY);

Router.js

Router.route('/', {
    name: 'home',
    onBeforeAction: function () {
        Actions.set(this.params.query);
        this.next();
    }
});

Template controller

Template.home.helpers({
    isModalOpened: function () {
        return Actions.get(ACTIONS_QUERY.IS_MODAL_OPEN);
    }
});
Template.home.events({
    'click .open-modal': function (event, template) {
        goActions(ACTIONS_QUERY.IS_MODAL_OPEN, true);
    }
    'click .close-modal': function (event, template) {
        goActions(ACTIONS_QUERY.IS_MODAL_OPEN, null); //or false
    }
});
function goActions(key, value){
    var query = Router.current().params.query;
    var newQueryParam = Actions.whatIfAsQueryParam(key, value);
    query[newQueryParam.name] = newQueryParam.value;
    Router.go('home', null, {query: query});
}

 {{#if isModalOpened}}
    <div class="modal-simple-fade fit">
        <div class="modal-simple">
            <h1>Hello! You can reload this page..</h1>
            <span>..and I'm still here waiting for you..</span>
            <button type="button" class="close-modal" style="position: absolute; bottom: 20px; right: 20px;">
                Close
            </button>
        </div>
    </div>
 {{/if}}

#API Reference:

QueryParamObject : object

Kind: global typedef
Properties

Name	Type	Description
name	string	of the query parameter
value	string	serialized URI-encoded value of the query parameter

ReactiveQueryKey : object | string

It could be just a String value, which will be treated as a name of parameter, or an object.

Kind: global typedef
Properties

Name	Type	Description
name	string	Key name
value	*	Default value
isValid	function	Should return true or false, receives the value as first argument
onChange	function	Runs if the value is changed, signature: onChange(oldValue, newValue, key.name)

ReactiveQuery

Kind: global class

• ReactiveQuery
  • new ReactiveQuery(name, keys)
  • .getName() ⇒ String
  • .get(key, [reactive]) ⇒ *
  • .setFromParams(params)
  • .set(key, value)
  • .setAll(data)
  • .whatIf([...arguments]) ⇒ object
  • .whatIfAsQueryParam([...arguments]) ⇒ QueryParamObject

new ReactiveQuery(name, keys)

ReactiveQuery constructor.

Param	Type	Description
name	string
keys	Array.<ReactiveQueryKey> | Object.<string, ReactiveQueryKey>	array or object of ReactiveQueryKey

reactiveQuery.getName() ⇒ String

Get ReactiveQuery name which is used as query param name

Kind: instance method of ReactiveQuery
Returns: String - name

reactiveQuery.get(key, [reactive]) ⇒ *

Similar to ReactiveDict, gets the value by the key

Kind: instance method of ReactiveQuery
Returns: * - any serializable data
Throws:

• Error If key is malformed

Param	Type	Description
key	ReactiveQueryKey	key to get data
[reactive]	boolean	Default true; pass false to disable reactivity

reactiveQuery.setFromParams(params)

Updates the data based on query params, ignores and deletes invalid data (if isValid callback is defined for the key). Also removes data that does not exist in params Typically it should be used when a url changes.

Kind: instance method of ReactiveQuery

Param	Type	Description
params	object	query params object like this {name1: value1, name2: value2}, URI-encoded values expected The same structure as returned by the iron-router method Router.current().params.query

reactiveQuery.set(key, value)

Directly sets data by the key.

Kind: instance method of ReactiveQuery

Param	Type	Description
key	ReactiveQueryKey	key
value	*	value

reactiveQuery.setAll(data)

Directly sets data copying all values from the data param by known keys. Values which are not set, will be considered as null.

Kind: instance method of ReactiveQuery

Param	Type	Description
data	object	object with data

reactiveQuery.whatIf([...arguments]) ⇒ object

Provides merged data based on the customData. Ignores invalid data (if isValid callback is defined for the key) If no customData provided or null, returns current data. If value is an object, you can use $unset as an entire key, to delete values from object. For example {$unset: {name: 1, surname}, question: "?"} for {name: "A", surname: "B", question: ""} will result {question: "?"}

Kind: instance method of ReactiveQuery
Returns: object - Current (possibly modified if customData argument provided) data as a key-value pairs

Param	Type	Description
[...arguments]	*	any number of arguments as key value, for example whatIf(key,value,key2,value2)

reactiveQuery.whatIfAsQueryParam([...arguments]) ⇒ QueryParamObject

Provides merged data based on the customData. Ignores invalid data (if isValid callback is defined for the key) If no customData provided or null, returns current data as {QueryParamObject}. If value is an object, you can use $unset as an entire key, to delete values from object. For example {$unset: {name: 1, surname}, question: "?"} for {name: "A", surname: "B", question: ""} will result {question: "?"}

Kind: instance method of ReactiveQuery

Param	Type	Description
[...arguments]	*	any number of arguments as key value, for example whatIfAsQueryParam(key,value,key2,value2)