Meteor's best ReactiveArray package, taking into consideration the Javascript's native array mutator, accessor and iteration methods, making them reactive.
On your command prompt just type:
meteor add ciclopes:reactive-array
Just assign a new instance of ReactiveArray to a variable and you're done.
i.e.: var reactive_array = new ReactiveArray
You can also assign a new instance with a initial value and other things (see Constructor):
var reactive_array = new ReactiveArray([1,2,3,4,5])
Example of a reactive usage in a Template helper:
// template_name.js
Template.template_name.helpers(
reactive_length: function () {
return reactive_array.getLength();
}
);
// template_name.html
<template name="template_name">
{{reactive_length}}
</template>
Then just call a mutator method and see the reactiveness work!
e.g. reavtive_array.push(0)
ALL ARRAY'S MUTATOR, ACCESSOR AND ITERATION METHODS (SEE REFERENCE) ARE AVAILABLE TO ALL INSTANCES OF ReactiveArray AND THEY'RE ALL REACTIVE. ALL MUTATOR METHODS TRIGGER A RECOMPUTATION OF WHATEVER THE ReactiveArray INSTANCES ARE BEING USED IN.
The ReactiveArray instances are not array-like objects. Therefore, they cannot be called within Array.prototype.[any_method].call nor Array.prototype.[any_method].apply as the context. What CAN be used as the context in such cases is the instance's built-in array object, retrieved through Get, BUT these calls WILL NOT BE REACTIVE.
ReactiveArray(initialValue, equalsFunction, makeArrayObjectReactive) -> Object
initialValue: ArrayThe array's initial value. Becomes the ReactiveArray instance's built-in array object.initialValue: Anything (2)The array's initial value. It's wrapped inside a Javascript regular array and becomes the ReactiveArray instance's built-in array object. Default:[]equalsFunction: Function(oldValue: Array, newValue: Anything) -> BooleanA function that receives the argumentsoldValueandnewValueand evaluates their equality. When set, this function will be called inside Set. By default this method just returnsfalse(givennewValuemay just beoldValuemutated), forcing the variable to always be updated on everyset(newValue)call.makeArrayObjectReactive: BooleanAs seen in Important notes, the ReactiveArray instances are not array-like objects, but THEY HAVE a built-in array that is returned by Get. When this argument is set totrue(which is default), the built-in array object becomes reactive as well. If set tofalse, the built-in array will be just a regular non-reactive Javascript array.
reactive_array.set(value)
Sets the built-in array object contained inside the ReactiveArray instance.
Uses the equalsFunction (see Constructor) as equality evaluator to decide wether or not to update the variable. If equalsFunction returns a falsy value, which means the old and new values are DIFFERENT, then the variable IS updated. Otherwise, there is no update.
value: ArrayBecomes the instance's built-in array object.value: Anything (2)It's wrapped inside a regular Javascript array and becomes the instance's array object.
Caution This method will make the newly set array to be reactive, if defined upon the ReactiveArray instance creation (see Constructor).
Caution 2
Calling this method with no argument will cause value to be considered undefined. So this would be the same as calling set([undefined]). To clear the array, see Clear.
reactive_array.get() -> Array
Returns the built-in array object contained inside the ReactiveArray instance. If defined upon the ReactiveArray instance creation, this array may be reactive (see Constructor).
reactive_array.remove(valueOrEvaluationFunction) -> Array
Returns a regular non-reactive Javascript array containing all removed elements evalueated by valueOrEvaluationFunction as truthy, if valueOrEvaluationFunction is a function, or strictly equal to valueOrEvaluationFunction otherwise.
valueOrEvaluationFunction: Function(element: Anything) -> BooleanEvaluation function that returns a truthy value meaning thatelementshould be removed or a falsy value otherwise.valueOrEvaluationFunction: Anything (2)A value that is wrapped in a strict equality function to evaluate which elements of the array should be removed.
e.g.:
// removes every element % 2 === 0 (even numbers) from the array
removed_elements = reactive_array.remove( function(element) {
return element % 2 === 0
})
// removes every element === 2 from the array
removed_elements = reactive_array.remove(2)
// from this point, it's easy to make 'removed_elements' a reactive source
removed_elements = new ReactiveArray(removed_elements)
reactive_array.clear()
Clears the instance's built-in array object. It's a shorthand of set([]).
reactive_array.getLength() -> Number
A reactive function that returns the length of the instance's built-in array object.
The MIT License (MIT)
Copyright (c) 2015 Antônio Augusto Morais
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.