Unique data binding library for dynamic fast data binding
- What is it?
- Installation
- How to use it:
- Examples
- How to contribute
- License
This library allows you to use event listeners in such a manner as standard events to listen to changes on any data set or data structure combining the methodology of arrays and objects as one.
This libray can be installed using:
The script can be loaded both in the head and in the body. All functionality is automatically loaded as soon as the file is loaded.
<script src="/(node_modules|bower_modules)/frytki/frytki.min.js"></script>
To start using it is as simple as just passing data or json into the frytki method
var obj = { arr: [20, 40, 50], obj: { num: 500, str: "string" } };
var data = frytki(obj);
data.addEventListener('num', console.log);
var json = '{ "arr": ["20", "40", "50"], "obj": { "num": "500", "str": "string" } }';
var data = frytki(json);
data.addEventListener('num', console.log);
When listening for data events there are two different types of listeners, the pre data update listener and the post data update listener. By simply adding update to the end of any listener your event will fire post data update meaning the object will have already changed and updated
data.addEventListener('numupdate', console.log);
Frytki objects act both as arrays and as objects allowing for unique and quick non parsing abilities. Array methods will only effect numerical indexes as an array should whil object methods effect all properties as they should.
Example:
var obj = { obj: { num: 500 } };
var data = frytki(obj);
data.push("text");
console.log(data.keys()); // (2) ["0", "obj"]
console.log(data.length); // 1
Data binding allows you to listen for the changes of any changes on an object the same way you would listen to an event on the dom, this includes bubbling and preventing default changes. Data binding comes in two forms a pre data update and a post data update. Post data means the object has already been updated with the new value and can onlybe reverted by changing again. WHile a pre update event can prevent the value from being set.
Bubbling:
var obj = { obj: { num: 500, inner: { str: "string" } } };
var data = frytki(obj);
data.addEventListener("str", console.log);
data.obj.inner.str = "char"; // changeEvent
Prevent Default:
var obj = { obj: { num: 500, inner: { str: "string" } } };
var data = frytki(obj);
data.addEventListener("str", function(e){ e.preventDefault(); return false; });
data.obj.inner.str = "char";
console.log(data.obj.inner.str); // "string"
Listening to events also allows for listening to when new data is created or deleted
var data = frytki();
data.addEventListener("create", console.log);
data.addEventListener("delete", console.log);
data.add("text","string") // eventObject
data.del("text") // eventObject
All functions you would find on an object or array are included in the frytki mixed data object, special not on Array mutation functions, these methods will not call the changes until they have finished process the changes for the data and then will fire all associated change events.
Standard methods that allow you to interact with your observable data, not using these methods will result in non observable data
- add|create(key, value) (required to add new observable properties)
- set(key, value) (can be used to set or create a value)
- del|remove(key) (deletes an observable property and all associated events)
Built in parsing methods allow for easy conversion of JSON data from and to observable data. using JSON.stringify even on circular objects will result in a clean json string that replaces circular values with "[Circular key_name]"
var json = '{ "arr": ["20", "40", "50"], "obj": { "num": "500", "str": "string" } }';
var data = frytki(json);
or
var data = frytki.parse(json);
Pointers allow us to reference outside objects within our own data object and not change the structure. Events are also passed to these other objects but when removed, the events are also removed with them.
var obj = { obj: { num: 500, inner: { str: "string" } } };
var outsideObj = { text: "writing" };
var data = frytki(obj);
data.addPointer("outside", outsideObj, "text");
outsideObj.text = "reading";
console.log(data.outside); // "reading"
The event object that is passed to each of these fired events allow for similar functionality as that of a standard DOM event listener
When called from a pre data update event, this method can be used to prevent the data from updating
data.addEventListener('num', function(e){ e.preventDefault(); });
When called from a pre data update event, this method can be used to stop the post data update events from firing
data.addEventListener('num', function(e){ e.stop(); });
// this will not fire
data.addEventListener('numupdate', console.log);
When called no bubbled listeners after the current one will fire, including post data updates
When called no listeners after the current one will fire, including post data updates
Shows the value that is being set
Shows the previous value of the item being set
The original object that fired the event
The parent object of this property if any
All other event properties follow the same guideline as a standard Event object
var json = fetchDataFromServer();
var data = frytki(json);
var node = document.querySelector(node);
node.innerHTML = data.title;
data.addEventListener("titleupdate", function(e){
node.innerHTML = e.value;
});
If You would like to contribute here are the steps
- Clone Repo: Frytki Github Repo
- Install any necessary dev dependencies
- build the project
npm run build - test your changes don't break anything
npm test - Make a pull request on github for your changes :)
You can view the license here: License
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent