Fork of https://github.com/lean/absolute-json/ with support for token replacement inside replacement strings
npm install absolute-json-improved-templating!logo
A complete tool to maintain all the front-end through a json. You can manipulate all text and HTML attributes automatically.
* The best way to work with config files
* Use it as localization library
* Dynamic loading json files
* Fast startup, lightweight
* Easy to maintain
* Errors and warnings
#####Bind your texts with the source json
``javascript`
//file: source.json
{
"title" : "GitHub",
"text" : "GitHub · Build software better, together."
}`
in your htmlhtml
becomes
`html
GitHub
GitHub · Build software better, together.
`#####Bind your texts with
place holders for values in the source json
`javascript
//file: source.json
{
"title" : "%1 is something %2",
}
`
in your html
`html
`
becomes
`html
Abjson is something Amazing
`#####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
`javascript
//file: source.json
{
"githubLink" : {
"text" : "GitHub · Build software better",
"href" : "https://github.com/"
}
}
`
in your html
`html
`
becomes
`html
GitHub · Build software better
`Getting started
create a file that will be the source of all your texts and HTML attributes`javascript//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
`html`Add the data-abjson attribute to the HTML elements
`html
`init the lib
`javascript
abjson.load({
sourceUrl : 'text-sources.json',
}, function(err){
if (err) {
throw err;
}
//update the dom
$(body).abjson();
});
`
Methods
###abjson.load (options, callback)
load the resource file and init the library. For example, you can load sources from memory
`javascript
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
`javascript
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
`javascript
var jsonData = {
"hello": "hola extraño, espero que disfrute leyendo esta documentación"
};
//init...
console.log(abjson.get('hello')); // hola extraño...
});
`
###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.`javascript
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
});
``##Changelog
###0.6
- Added support to load json from reference (not a file URL)
###0.5
- Many improvements
- Removed underscorejs dependency