A complete tool to maintain all the front-end through a json
MIT License
=========
A complete tool to maintain all the front-end through a json. You can manipulate all text and HTML attributes automatically.
#####Bind your texts with the source json
//file: source.json
{
"title" : "GitHub",
"text" : "GitHub Build software better, together."
}
in your html
<h3 data-abjson='title'></h3>
<p data-abjson='text'></p>
becomes
<h3 data-abjson='title'>GitHub</h3>
<p data-abjson='text'>GitHub Build software better, together.</p>
#####Bind your texts with place holders for values
in the source json
//file: source.json
{
"title" : "%1 is something %2",
}
in your html
<h3 data-abjson='title' data-abjson-r='Abjson|Amazing'></h3>
becomes
<h3 data-abjson='title' data-abjson-r='Abjson|Amazing'>Abjson is something Amazing</h3>
#####Bind html attributes You can work with objects in the source. The default property for the html text in an object will be "text". If you specified an html attribute it will be replaced
//file: source.json
{
"githubLink" : {
"text" : "GitHub Build software better",
"href" : "https://github.com/"
}
}
in your html
<a data-abjson='githubLink' href=''></a>
becomes
<a data-abjson='github' href='https://github.com/'>GitHub Build software better</a>
create a file that will be the source of all your texts and HTML attributes
//file: text-sources.json
{
"greeting" : "Hello!!!",
"githubLink" : {
"text" : "GitHub Build software better, together.",
"href" : "http://www.github.com"
}
}
now in your HTML import the lib
<!-- file: example.html -->
<script src="absolute-json.js">
Add the data-abjson attribute to the HTML elements
<p data-abjson='greeting'></p>
<a src='' data-abjson='githubLink'></a>
init the lib
abjson.load({
sourceUrl : 'text-sources.json',
}, function(err){
if (err) {
throw err;
}
//update the dom
$(body).abjson();
});
###abjson.load (options, callback) load the resource file and init the library.
For example, you can load sources from memory
var jsonData = {
"hello": "hola"
};
abjson.load({
source : jsonData,
}, function(err){
if (err) {
throw err;
}
//update the dom
$(body).abjson();
});
Or if you want, you can load sources from an URL
abjson.load({
sourceUrl : "http://path.to.your.source/file.json",
}, function(err){
if (err) {
throw err;
}
//update the dom
$(body).abjson();
});
###abjson.get (key) get the value for a given key
var jsonData = {
"hello": "hola extrao, espero que disfrute leyendo esta documentacin"
};
//init...
console.log(abjson.get('hello')); // hola extrao...
});
###abjson.get (key, a, b...) It accepts a variable number of parameters after the key. get the value for a given key. If the value is templated, generate the output based on the extra parameters provided.
var jsonData = {
"hello": "hola %1 %2!",
"bye": "chau %1"
};
//init...
console.log(abjson.get('hello', 'Mr.', 'Magoo')); // hola Mr. Magoo!
console.log(abjson.get('bye','Magoo')); // chau Magoo
});
##Contribute
##Changelog
###0.7
###0.6
###0.5
##TODO