Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jeremenichelli/mnster
Library for easy data binding
https://github.com/jeremenichelli/mnster
Last synced: 23 days ago
JSON representation
Library for easy data binding
- Host: GitHub
- URL: https://github.com/jeremenichelli/mnster
- Owner: jeremenichelli
- License: mit
- Created: 2014-09-27T20:38:57.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-01-04T02:16:30.000Z (almost 9 years ago)
- Last Synced: 2024-10-18T19:40:33.254Z (about 1 month ago)
- Language: JavaScript
- Size: 70.3 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mnster [](https://travis-ci.org/jeremenichelli/mnster)
A simple data binding library to cover the basic needs and with the possibility to expand its bindings in a very simple way. Keep going through this document and you'll see how.
## Install
If you want to use ```mnster```in your project you can just add a script tag to it.
```
```
It's also available in *npm* and *bower* if you are using any of these package managers.
```
npm install mnster --save
```
```
bower install mnster --save
```
### mnster.view
As most of the libraries of its kind, **mnster** will let you fill the content of an HTML template by calling the *view* function, you only need to pass a template (node), a context (string) and the model of the view (object).
```js
var template = document.createElement('p');
template.setAttribute('mns-text', 'me.name');
mnster.view(template, { context: 'me', model: { name: 'John Oliver' } });
```
Yes! It's that simple.
As you might notice you will need to add some attributes that must start with **mns-** and then continue with the name of the binding and depending on it some other information. The value of that attribute needs to start with the name of the context and then the property.
You can have as many properties as you want.
```js
var template = document.createElement('p');
template.innerHTML = ' ' +
'';
mnster.view(
template, {
context: 'me',
model: {
name: {
first: 'John',
last: 'Oliver'
}
}
});
```
You can create the template and later append it to the body of the document or get just it from the DOM and generate a view, both will work good and of course you have other bindings available.
### bindings
Here are the things you can do with **mnster** with just adding it to your project.
*If the property you declared in the binding attribute is not found *mnster* won't add nothing to the node.*
#### mns-text
Sets the text content of an element.
```html
```
#### mns-html
Inserts HTML content to an element.
```html
```
#### mns-attr-[ATTRIBUTE_NAME]
Adds an atribute and its value to the element.
```html
![]()
```
#### mns-data-[ATTRIBUTE_NAME]
Adds a data atribute and its value to the element.
```html
![]()
```
#### mns-show
Shows the element if the value form the model is true.
```html
Hire me!
```
#### mns-hide
Hides the element if the value form the model is true.
```html
Hire me!
```
#### mns-on-[EVENT]
Sets an event in the element. It can be global or inside a controller. When you declare a view you are able to add a controller as a configuration, if you don't specify that then **mnster** will asume the method is global.
```js
ctrl = {
showMessage: function() {
alert('Click triggered!');
}
};
mnster.view(
template, {
context: 'me',
model: {},
controller: ctrl
}
});
```
```html
alert!
```
#### mns-each-[ITEM]
Generates content for every item in the model.
```html
-
in
```
**Note:** You may notice that there aren't a lot of bindings available. The reason is that I usually don't like to include code in my projects that doesn't end up being used. So I prefer to keep the bindings to minimum, this means less file size and faster loading times.
*But I need other bindings!* Yes, there's a chance you might need more bindings, that's why **mnster** allows you to declare bindings in a very easy way. You can *feed your mnster* with as much bindings as you want.
### Declaring new bindings
If you need to extend the funcitonality of this library, you can use the ```mnster.binding``` method. First of all, remember that any binding attribute must start with *mns-* followed by the binding name itself and after that you can add as much letters and hyphens as you want. You'll also need a function that does the trick, for that **mnster** will give you a context object with all the values you need to apply your binding.
Every context object will contain this properties:
- **context.node** element that holds the binding attribute
- **context.attribute** name of the attribute
- **context.value** value of the attribute
- **context.valueFromModel** value of the property in the model, if it's not define it will return *null*.
- **context.controller** controller declared in the view
Let's see our first example, here the context object that the **mns-text** receives contains these values:
```js
var template = document.createElement('p');
template.setAttribute('mns-text', 'me.name');
mnster.view(template, { context: 'me', model: { name: 'John Oliver' } });
```
- **context.node** template (node)
- **context.attribute** 'mns-text' (string)
- **context.value** 'me.name'
- **context.valueFromModel** 'John Oliver' (string)
- **context.controller** window object
You can check the source code and see how the *mns-attr* works.
```js
mnster.binding('attr', function (context) {
var node = context.node,
attr = context.attribute.replace('mns-attr-', ''),
value = context.valueFromModel;
if (attr && value !== null) {
node.setAttribute(attr, value + '');
}
});
```
We use **context.attribute** value and replace the first part of it to get the actual attribute name that needs to be added. Then we get **context.valueFromModel** and if it's not null and if the attribute anme is not an empty string it is set to the element.
*You can add as many bindings as you want.*
### Change binding prefix
If you don't like ```mns-``` as the prefix you can change it calling ```mnster.prefix``` and passing a valid string.
```js
mnster.prefix('data');
```
### Size
- **mnster.js** 9.26KB
- **mnster.min.js** 3.12KB
- **gzipped mnster.min.js** 1.21KB
#### v1.3.0
- Event binding only works on browsers with `addEventListener` support.
- `mnster.view` supports content from a template tag as first argument.
### Contribution
This is the first version of this library. Feel free to use it, explore it, propose changes and bindings or rise issues here. It's open for everyone.
*feed your mnster and happy coding!*