A MooTools client-side MVC.
Version: 0.2.1 (Alpha)
Influences:
Dependencies:
Focus:
Extensions:
The Model is a Object-like MooTools Class object that provides a basic API to interact with data. You can use Model by itself or extend other Class objects with it. It implements each, filter, and other convenient methods from Object.
var model = new Neuro.Model(data [, options]);
data - (Object) An object containing key/value pairsoptions - (Object, optional) The Model options
change: function(model){} - Triggered when a change to the model's data has occurredchange:key: function(model, key, value, oldValue){} - Triggered when a specific model data property change has occurred. The key refers to the specific property. All change:key events will be triggered before change is triggered.destroy: function(model){} - Triggered when the model is destroyed.reset: function(model){} - Triggered when the model is reset to its default values._ is considered private and should not be used or directly interacted with.The way to assign values to properties the model has. Do not use direct assignment else events will not be triggered or custom setters will not be used.
model.set(property, value);
model.set(object);
change:keychange// set a property value
model.('hasGlasses', true);
// set the property 'name' as an object.
model.set('name', {
first: 'Garrick',
last: 'Cheung'
});
set an object that contains all the property value pairs
model.set({
name: {
first: 'Garrick',
last: 'Cheung'
}
});
Use to check if data is currently being handled by the model to assign values to properties the model has.
model.isSetting();
Retrieve a property value the model has.
model.get(property);
model.Get(property1, property2);
model.get('name'); // returns value of 'name' property.
model.get('name', 'age'); // returns object containing name and age properties
Retrieve all properties/values the model has. The returned object is a clone (dereferenced) of the data the model has.
model.getData();
Retrieve the previous property value he model had. Model only retains one record of previous data.
model.getPrevious(property);
model.getPrevious(property1, property2);
Retrieve all previous properties/values the model had. THe returned object is a clone (dereferenced) of the previous data the model had.
model.getPreviousData();
Unset data properties the model has. Data properties can not be erased so they will be set to undefined.
model.unset(property);
model.unset([property1, property2]);
change:keychangeReset data properties to their default values the model had.
model.reset();
model.reset(property);
model.reset([property1, property2]);
change:keychangeresetTriggers the destroy event. This should be overriden in a Class that extends from Model to do additional things. If overriden, remember to call this.parent(); to trigger the destroy method, or execute signalDestroy manually.
model.destroy();
destroyReturns a copy of data the model has. Can be used for persistence, serialization, or augmentation before passing over to another object. JSON.stringify uses this to to create a JSON string, though the method itself does not return a String.
model.toJSON();
A convenient method to attach event listeners to change:key.
model.spy(property, function);
model.spy(object);
A convenient method to remove event listeners to change:key. If a function is not provided, all events attached to a specific change:key will be removed.
model.spy(property, function);
see Mixin: Connector
see Mixin: Connector
see Mixin: Butler
see Mixin: Butler
see Mixin: Butler
see Mixin: Butler
see Mixin: Butler
see Mixin: Events
see Mixin: Events
see Mixin: Events
see Mixin: Events
see Mixin: Events
see Mixin: Options
see Mixin: Silent
see Mixin: Silent
The following methods have been implemented from MooTools-Core Object onto Neuro Model. They take the same arguments as their Object counterparts with the exception of having to pass the model as the object to be acted upon.
eachsubsetmapfiltereverysomekeysvaluesgetLengthkeyOfcontainstoQueryStringmodel.each(function[, bind]);
model.subset(keys);
model.map(function[, bind]);
model.filter(function[, bind]);
model.every(function[, bind]);
model.some(function[, bind]);
model.keys();
model.values();
model.getLength();
model.keyOf(property);
model.contains(value);
model.toQueryString();
The Collection is an Array-like MooTools Class object that provides a basic API to interact with multiple Models. You can use Collection by itself or extend other Class objects with it. It contains a reference to a Model Class to create a model instance when adding a data Object. The reference Model Class can be optionally replaced by a different Class that extends from Model. It implements each, filter, and some other convenient methods from Array.
var collection = new Neuro.Collection(data [, options]);
data - (Mixed, optional)
Model instanceoptions - (Object, optional) The Model options
Model Class used to create model instances from when an Object is passed to add.Object containing options for creating new model instances. See Neuro Modeladd: function(collection, model){} - Triggered when a model is added to the collection.remove: function(collection, model){} - Triggered when a specific model is removed from the collection.empty: function(collection){} - Triggered when the collection is emptied of all models.sort: function(collection){} - Triggered when sort or reverse occurs._ is considered private and should not be used or directly interacted with.Collection Class as the _Model property. It can be overriden by options.Model or when a Class extends from Collection and defines a different _Model property.options.primaryKey to better identify model instances, such as checking if the collection hasModel.Checks if the collection instance contains a model by checking if the model exists in the _models array or using options.primaryKey to compare models.
currentCollection.hasModel(model);
Object or Model instance that is used to compare with existing models in the collection. options.primaryKey will be used to compare against the models if an initial use of Array.contains returns false.Adding a model to the collection should always go through this method. It appends the model to the internal _model array and triggers the add event if the collection does not already contain the model. If an Object is passed in, the Object will be converted to a model instance before being appended to _model. Adding a model will increase the collections length property. It is possible to insert a model instance into _model at a specific index by passing a second argument to add. A remove method is attached to the models destroy event so that the model can be properly removed if the model destroy event is triggered.
currentCollection.add(models, at);
Object with key/value pairs of data properties. It will be converted to a Model instance before adding to _model.Model instance.Array that contain a mix of Object and Model instances._model array. If the collection is empty, at is ignored and and the model is inserted as the first item in the array.addcurrentCollection.add({
id: 1, name: 'Bruce Lee'
}, 2);
currentCollection.add( new Neuro.Model({id: 1, name: 'Bruce Lee'}) );
currentCollection.add(
[
{id: 1, name: 'Bruce Lee'},
new Neuro.Model({id: 1, name: 'Chuck Norris'})
]
);
Get the model by index. Multiple indexes can be passed to get to retrieve multiple models.
currentCollection.get(index);
_model. If multiple indexes are passed to get, an Array of models is returned, where each model corresponds to the index.currentCollection.get(0); // returns the model instance that corresponds to the index argument
currentCollection.get(0, 2, 3); // returns an array of model instances where each model corresponds to each index argument
Remove a model or models from the collection. It will trigger the remove event for each individual model removed. The collection should remove the model only if it exists on the collection. Removing the model from the collection will also remove the remove method from the models destroy event.
currentCollection.remove(model);
_model.removevar model = new Neuro.Model({id: 1, name: 'Garrick'});
currentCollection.add(model);
currentCollection.remove(model);
//or
currentCollection.remove([model]); // remove an array of models.
Replace an existing model in the collection with a new one if the old model exists and the new model does not exist in the collection _model array. This will trigger add and remove events.
currentCollection.replace(oldModel, newModel);
addremoveSort the collection. Works the same way Array.sort would work. Triggers sort event.
currentCollection.sort(function);
sort// Sorts models ordered by id, where id is a number.
// This function sorts the order from smallest to largest number.
currentCollection.sort(function(modelA, modelB){
return modelA.get('id') - modelB.get('id');
});
Reverses the order of the collection. Works the same way Array.reverse would work. Triggers sort event.
currentCollection.reverse();
sortEmpty the collection of all models. Triggers the empty event and remove event for each model removed.
currentCollection.empty();
remove for each model removedemptyReturns a copy of collection _model. Can be used for persistence, serialization, or augmentation before passing over to another object. JSON.stringify uses this to to create a JSON string, though the method itself does not return a String.
currentCollection.toJSON();
_model.see Mixin: Events
see Mixin: Events
see Mixin: Events
see Mixin: Events
see Mixin: Events
see Mixin: Options
see Mixin: Connector
see Mixin: Connector
see Mixin: Silent
see Mixin: Silent
The following methods have been implemented from MooTools-Core Array onto Neuro Collection. They take the same arguments as their Object counterparts with the exception of having to pass the collection as the object to be acted upon.
forEacheachinvokeeveryfiltercleanindexOfmapsomeassociatelinkcontainsgetLastgetRandomflattenpickcollection.forEach(function[, bind]);
collection.each(function[, bind]);
collection.invoke(method[, arg, arg, arg ...]);
collection.every(function[, bind]);
collection.filter(function[, bind]);
collection.clean();
collection.indexOf(item[, from]);
collection.map(function[, bind]);
collection.some(function[, bind]);
collection.associate(object);
collection.link(object);
collection.contains(item[, from]);
collection.getLast();
collection.getRandom();
collection.flatten();
collection.pick();
The View is a MooTools Class object. It acts as a layer between an element and everything else. One of the usual conventions of plugins that deals with elements has to attach/detach events to/from the element. The View provides a simple, yet basic, way of binding methods/functions to the element event listeners.
Another convention is that attaching event handlers to classes can be a manual process. View implements the Connector utility class to provide a powerful and automatic way to attach events between two classes.
The render method is the main method that should be used to visualize the element with data. The method is basic, triggering the render event on the View class. Other class objects should extend from the View class and override the render method, but call this.parent in order to trigger the render event.
Starts out with executing setup and then triggering ready event.
var view = new Neuro.View(options);
options - (Object, optional) The View options
undefined) The root/parent element of where the rendered elements should be placed.undefined) An Object of key/value pairs
key - (String) The element event or event-delegate type. click or click:relay(selector)value - (String | Function | Array) The handler that is attached to the event. It can be a String (amethod name in the view class instance), Function, or an Array of containing a mix of String or Function items.ready: function(view){} - Triggered at the end of the setup method.render: function(view){} - Triggered at the end of the render method.inject: function(view){} - Triggered at the end of the inject method.dispose: function(view){} - Triggered at the end of the dispose method.destroy: function(view){} - Triggered at the end of the destroy method._ is considered private and should not be used or directly interacted with.Called during initialize to setOptions, and setElement.
initializeA method to retrieve the element stored in the view instance. Any Class instance, with a toElement method, passed to MooTools Element document.id or $ method will return the value from the classes toElement method. This is a hidden MooTools Core trick.
view.toElement();
document.id(view);
$(view);
element property stored in view instance.Store the root element for the view instance. If an element exists, it will first execute View destroy method to properly detach events and remove references to it. Then it will store a reference to the element and execute View attachEvents.
view.setElement(element);
attachEvents will refer to options.events for the event and method/function to attach.Attach events to the root element property in the view instance. It refers to options.events to map element events to functions or methods in the view instance. Events can be detached using detachEvents. element or options.events are required to exist.
view.attachEvents();
Detach events from the root element property in the view instance. It refers to options.events to map element events to functions or methods in the view instance. Events can be attached using attachEvents. element or options.events are required to exist.
view.detachEvents();
It is a no-op method. Override create in your Class that extends from View. It could be used to create the root element, or other child elements that goes into the root `element.
view.create();
Although render is considered a no-op method, it still trggers the render event. Override render in your Class that extends from View. Remember to call 'this.parent()' at the end of your code to execute the original render method that will trigger the render event. Pass data to the render method, such as Neuro Model or Neuro Collection.
If you are passing any Class that implements Mixin: Connector, you should consider using the connect method. It will help to automatically attach events between the View instance and the other Classes, in this case it is likely to be a Neuro Model or Neuro Collection instances.
view.render(data);
renderInject or inserts the root element relative to another element or View instance. document.id / $ will resolve the element from the other View instance.
view.inject(reference[, where]);
element will be placed relative to the reference element. A String should be the id of the reference element, without the "#". A Class instance should have a toElement method in order to resolve the reference element.element relative to the reference element. Can be: top, bottom, after, or before.injectRemoves the Element from the DOM but retains it in memory if the element exists.
view.dispose();
disposeRemoves the Element and its children from the DOM and prepares them for garbage collection. Executes detatchEvents and removes reference to element in element property. Triggers destroy event.
view.destroy();
From MooTools Documentation:
A Utility Class. Its methods can be implemented with Class:implement into any Class. Events in a Class that implements Events must be either added as an option or with addEvent, not directly through .options.onEventName.
For new classes:
var MyClass = new Class({ Implements: Events });
For existing classes:
MyClass.implement(Events);
Events has been designed to work well with the Options class. When the option property begins with 'on' and is followed by a capital letter it will be added as an event (e.g. onComplete will add as complete event).var Widget = new Class({
Implements: Events,
initialize: function(element){
// ...
},
complete: function(){
this.fireEvent('complete');
}
});
var myWidget = new Widget();
myWidget.addEvent('complete', myFunction);
Adds an event to the Class instance's event stack.
myClass.addEvent(type, fn[, internal]);
complete).var myFx = new Fx.Tween('element', 'opacity');
myFx.addEvent('start', myStartFunction);
The same as addEvent, but accepts an object to add multiple events at once.
myClass.addEvents(events);
start), and value the function that is called when the Event occurs.var myFx = new Fx.Tween('element', 'opacity');
myFx.addEvents({
start: myStartFunction,
complete: function() {
alert('Done.');
}
});
Fires all events of the specified type in the Class instance.
myClass.fireEvent(type[, args[, delay]]);
complete).var Widget = new Class({
Implements: Events,
initialize: function(arg1, arg2){
//...
this.fireEvent('initialize', [arg1, arg2], 50);
}
});
Removes an event from the stack of events of the Class instance.
myClass.removeEvent(type, fn);
complete).Removes all events of the given type from the stack of events of a Class instance. If no type is specified, removes all events of all types.
myClass.removeEvents([events]);
addEvents.var myFx = new Fx.Tween('myElement', 'opacity');
myFx.removeEvents('complete');
Events:removeEvent.From MooTools Documentation:
A Utility Class. Its methods can be implemented with Class:implement into any Class. Used to automate the setting of a Class instance's options. Will also add Class Events when the option property begins with 'on' and is followed by a capital letter (e.g. onComplete adds a complete event). You will need to call this.setOptions() for this to have an effect, however.
For new classes:
var MyClass = new Class({Implements: Options});
For existing classes:
MyClass.implement(Options);
Merges the default options of the Class with the options passed in. Every value passed in to this method will be deep copied. Therefore other class instances or objects that are not intended for copying must be passed to a class in other ways.
myClass.setOptions([options]);
var Widget = new Class({
Implements: Options,
options: {
color: '#fff',
size: {
width: 100,
height: 100
}
},
initialize: function(options){
this.setOptions(options);
}
});
var myWidget = new Widget({
color: '#f00',
size: {
width: 200
}
});
//myWidget.options is now: {color: #f00, size: {width: 200, height: 100}}
// Deep copy example
var mySize = {
width: 50,
height: 50
};
var myWidget = new Widget({
size: mySize
});
(mySize == myWidget.options.size) // false! mySize was copied in the setOptions call.
If a Class has Events as well as Options implemented, every option beginning with 'on' and followed by a capital letter (e.g. onComplete) becomes a Class instance event, assuming the value of the option is a function.
var Widget = new Class({
Implements: [Options, Events],
options: {
color: '#fff',
size: {
width: 100,
height: 100
}
},
initialize: function(options){
this.setOptions(options);
},
show: function(){
// Do some cool stuff
this.fireEvent('show');
}
});
var myWidget = new Widget({
color: '#f00',
size: {
width: 200
},
onShow: function(){
alert('Lets show it!');
}
});
myWidget.show(); // fires the event and alerts 'Lets show it!'
A Utility Class. It allows automatic attachment/detachment of event listeners between two classes.
A key/value object to map events to functions or method names on the target class that will be connected with. The value can also be an object that contains more key/value pairs. This allows to attach sub-events, such as change:key. Note: An asterisk (*) as the sub-event refers to the parent event only.
event: method
String (name of method to retrieve said method from target class) or Function to be attached as the event handlerkey will refer to the sub-event and value refers to String, Function, or Array to attach as event handlers. The sub-event will be prepended by the event with a :.The following will show what key/value pairs will look like and what they look like when attached manually instead of with connector.
value is a stringchange: 'doneMethodName'
currentClass.addEvent('change', targetClass.doneMethodName.bind(targetClass));
value is a functionchange: function(){/*... code here ...*/}
currentClass.addEvent('change', function(){/*... code here ...*/});
value is an arraychange: ['doneMethodName', function(){/*... code here ...*/}]
currentClass.addEvent('change', targetClass.doneMethodName.bind(targetClass));
currentClass.addEvent('change', function(){/*... code here ...*/});
value is an object with subevents and a mix of string, function, or array.change: {
'*': 'doneMethodName',
'name': function(){/*... code here ...*/},
'age': ['otherDoneMethodName', function(){/*... other code here ...*/}]
}
currentClass.addEvent('change', targetClass.doneMethodName.bind(this));
currentClass.addEvent('name', function(){/*... code here ...*/});
currentClass.addEvent('age', targetClass.otherDoneMethodName.bind(targetClass));
currentClass.addEvent('age', function(){/*... other code here ...*/});
Connects two classes by using options.connector as the map to either attach event listeners to functions on options.connector or methods on the target class where the method names are retrieved from options.connector. Default behavior is to connect two classes. Connect one way by passing a second argument as true.
currentClass.connect(targetClass[, oneWay]);
false by default) Set to true will only connect this class with the target class and will not have the target class connect with this class.A Utility Class. It provides a way to define custom setters/getters on a Class.
A key/value object where the key is the name of the setter and value is an object containing overriding set/get methods.
name: {
set: function,
get: function
}
Existing accessors in _accessors need to be decorated so they are merged with options.accessors before being sent to setAccessor.
currentClass.setupAccessors();
Check whether an accessor is being used by checking if _accessorName has been defined. This will allow a class to bypass recursive calls to the same custom setter/getter.
currentClass.isAccessing();
A method to decorate custom setters/getters that will allow the use of isAccessing to prevent recursive calls to the same custom setter/getter.
currentClass.setAccessor(name, obj);
currentClass.setAccessor(obj);
key is set or get and value is the function. Any key/value pair is optional. A set can exists without a get, and a get can exist without a set._orig attribute.var klass = new Class({
Implements: CustomAccessor,
options: {
accessors: {
fullName: {
set: function(){}
}
}
}
});
var currentClass = new klass();
var fullNameAccessor = currentClass.getAccessor('fullName');
fullNameAccessor.set; // returns the decorated set function.
fullNameAccessor.set._orig // is the undecorated original set function.
A method to retrieve stored accessors by name or by name and type.
currentClass.getAccessor(name[, type]);
type in the accessor object. The accessor object is retrieved with the name.Return an accessor object
currentClass.setAccessor('fullName', {
set: function(){}
});
var fullNameAccessors = currentClass.getAccessor('fullName');
/*
fullNameAccessors returns and object where the set function is the decorated function
{
set: function(){}
}
*/
Return the decorated function in the accessor object
// Returns the decorated function that is stored with the set key, in the fullName accessor object.
var fullNameSetAccessor = currentClass.getAccessor('fullName', 'set');
Remove an accessor object or decorated function from the accessor object.
currentClass.unsetAccessor(name[, type]);
key of the function that should be removed from the accessor object.Remove an accessor object
currentClass.unsetAccessor('fullName');
Remove a function from the accessor object
currentClass.unsetAccessor('fullName', 'set');
Silent is a MooTools Class object without a constructor. It is used as a mixin for other Class objects, providing a solution to disable before a function executes, and re-enabling afterwards.
Checks if the Class is currently silent.
currentClass.isSilent();
Any method that can trigger an event can be temporarily disabled by passing the function through silence. Once the function has been triggered, events will be re-enabled.
currentClass.silence(function);
FAQs
A MVC written with MooTools.
The npm package Neuro receives a total of 4 weekly downloads. As such, Neuro popularity was classified as not popular.
We found that Neuro demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.