jPut is a small jQuery plugin where you can append your JSON to customized HTML format easily. You can also dynamically bind values to your existing data easily. Its simple and fast. The jPut can call by usind data attributes.
- You can load JSON via AJAX
- It can supoprt multi dimensional JSON
- It support JSONP format
2.0.2
You need to add jquery.js & jput2.js :
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jput.min.js"></script>In this simple example you have list of users as JSON. So you want to render all this as html. In this example you are using data attributes to call jPut.
#####Code
<ul jput="users" jput-jsondata='[{"name":"User 1"},{"name":"User 2"},{"name":"User 3"}]'>
<li>{{json.name}}</li>
</ul> In this example jput="users" attribute sets the entire div as jPut template for methord users. By putting this attribute the jPut will create a Object inside the variable jPut.[jPut.users] (NOTE: jPut variable is created inside the jQuery plugin. So please avoide to use jPut variable in your code).
jput-jsondata='' is the attribute used to set your default data.If your default data is empty jPut wont render anything.
For data binding we use {{ json.name }} expression. Since jPut is storing all values in JSON you have to user json.YOUR_VARIABLE_NAME
<script>
//on document ready
$(document).ready(function(){
//your variable with your users information
var users=[{"name":"User 1"},{"name":"User 2"},{"name":"User 3"}];
/*
* Binding your json to jPut
* jPut.<yourTemplateName>.data
*/
jPut.users.data=users;
});
</script>
<ul jput="users">
<li>{{json.name}}</li>
</ul> ###Template Properties
In jPut template you can give any kind of expressions and also you can call your own custom JavaScript functions.
jPut expressions are written inside double braces: {{ expression }}.
You can also use different expression if you have conflict with any other plugin or framework.{[ expression ]}
For this you have to set you expression as "exp2".
ex :
<script>
function grade(mark)
{
if(mark>200)
return "A";
else if(mark>150)
return "B";
else
return "C";
}
</script>
<ul jput="users" jput-jsondata='[{"name":"User 1","total":180},{"name":"User 2","total":260}]'>
<li>Name : {{json.name}}</li>
<li>Total {{json.total}}</li>
<li>Percentage {{json.total/300}}</li>
<li>Grade {{grade(json.total)}}</li>
<li>Grade {{json.total>199?"PASS":"FAIL"}}</li>
</ul> ###jPut Options
//The div you want to upload
$('#main').jPut({
dataName:'', //object name if the json data is in specified object
jsonData:projects, //(jsonData/ajax_url) is required your json data to append/prepend
ajax_url:'http://yourdomain.com/data.json',//ajax:Specifies the URL to send the request to. Default is the current page
ajax_data:'', //ajax:specifies data to be sent to the server
ajax_type:'', //ajax:specifies the type of request. (GET or POST)
name:'template1', //*required field jput template name
limit:0, //default:0 limit the number of record to show
prepend:false, //default:false If you want to prepend data make it true. By default data will append
done:function(e){
//on success (e will be the json data)
},
error:function(msg){
alert('Error Message:'+msg); //On error
}
});To learn more go throught the examples.
MIT