├── _config.yml ├── docs ├── _config.yml ├── examples │ ├── api │ │ ├── regions.js │ │ └── companies.js │ ├── images │ │ └── logo18.jpg │ ├── lib │ │ ├── jquery.view-engine.min.js.gz │ │ ├── jquery.view-engine.min.js │ │ └── jquery.view-engine.js │ ├── bootstrap │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ ├── glyphicons-halflings-regular.woff │ │ │ └── glyphicons-halflings-regular.woff2 │ │ ├── js │ │ │ ├── npm.js │ │ │ ├── dataTables.bootstrap.min.js │ │ │ ├── bootstrap.min.js │ │ │ └── jquery.dataTables.min.js │ │ └── css │ │ │ └── dataTables.bootstrap.min.css │ ├── ajax-list.html │ ├── ajax-dropdown.html │ ├── list.html │ ├── details.html │ ├── table.html │ ├── panels.html │ └── edit.html ├── iterators.md ├── ajax-list.md ├── ajax-dropdown.md ├── usage.md ├── form.md └── index.md ├── src ├── jquery.view-engine.min.js.gz ├── jquery.view-engine.min.js └── jquery.view-engine.js ├── bower.json ├── README.md └── test ├── basic.html ├── form.html └── qunit └── qunit-2.4.0.css /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /docs/examples/api/regions.js: -------------------------------------------------------------------------------- 1 | ["North","West","South","East"] -------------------------------------------------------------------------------- /docs/examples/images/logo18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JocaPC/jquery-view-engine/HEAD/docs/examples/images/logo18.jpg -------------------------------------------------------------------------------- /src/jquery.view-engine.min.js.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JocaPC/jquery-view-engine/HEAD/src/jquery.view-engine.min.js.gz -------------------------------------------------------------------------------- /docs/examples/lib/jquery.view-engine.min.js.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JocaPC/jquery-view-engine/HEAD/docs/examples/lib/jquery.view-engine.min.js.gz -------------------------------------------------------------------------------- /docs/examples/bootstrap/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JocaPC/jquery-view-engine/HEAD/docs/examples/bootstrap/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /docs/examples/bootstrap/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JocaPC/jquery-view-engine/HEAD/docs/examples/bootstrap/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /docs/examples/bootstrap/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JocaPC/jquery-view-engine/HEAD/docs/examples/bootstrap/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /docs/examples/bootstrap/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JocaPC/jquery-view-engine/HEAD/docs/examples/bootstrap/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jovn", 3 | "authors": [ 4 | "Jovan Popovic " 5 | ], 6 | "homepage": "https://github.com/JocaPC/jquery-view-engine", 7 | "description": "JQuery view engine that binds plain JavaScript objects into plain HTML templates", 8 | "main": "src/jquery.view-engine.js", 9 | "license": "MIT", 10 | "dependencies": { 11 | "jquery": ">=3.0.0" 12 | }, 13 | "ignore": [ 14 | "*", 15 | "!src" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /docs/examples/bootstrap/js/npm.js: -------------------------------------------------------------------------------- 1 | // This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment. 2 | require('../../js/transition.js') 3 | require('../../js/alert.js') 4 | require('../../js/button.js') 5 | require('../../js/carousel.js') 6 | require('../../js/collapse.js') 7 | require('../../js/dropdown.js') 8 | require('../../js/modal.js') 9 | require('../../js/tooltip.js') 10 | require('../../js/popover.js') 11 | require('../../js/scrollspy.js') 12 | require('../../js/tab.js') 13 | require('../../js/affix.js') -------------------------------------------------------------------------------- /docs/examples/api/companies.js: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "ID": 1, 4 | "Name": "Emkay Entertainments", 5 | "Address": "Nobel House, Regent Centre" 6 | }, 7 | { 8 | "ID": 2, 9 | "Name": "The Empire", 10 | "Address": "Milton Keynes Leisure Plaza" 11 | }, 12 | { 13 | "ID": 3, 14 | "Name": "Asadul Ltd", 15 | "Address": "Hophouse" 16 | }, 17 | { 18 | "ID": 4, 19 | "Name": "Star Records", 20 | "Address": "St Danny Street" 21 | }, 22 | { 23 | "ID": 5, 24 | "Name": "Ashley Mark Publishing Company", 25 | "Address": "1-2 Vance Court" 26 | } 27 | ] -------------------------------------------------------------------------------- /docs/examples/ajax-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | List 5 | 6 | 7 | 8 | 9 | 10 | 19 | 20 | 21 |
22 | Documentation 23 |

Companies

24 | 32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /docs/examples/ajax-dropdown.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dropdown 5 | 6 | 7 | 8 | 9 | 10 | 19 | 20 | 21 |
22 | Documentation 23 |
24 |
25 | 26 | 28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/examples/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | List 5 | 6 | 7 | 8 | 9 | 10 | 44 | 45 | 46 |
47 | Go to: List Table Panels 48 |

Companies

49 | 57 |
58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /docs/examples/bootstrap/js/dataTables.bootstrap.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | DataTables Bootstrap 3 integration 3 | ©2011-2015 SpryMedia Ltd - datatables.net/license 4 | */ 5 | (function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(a){return b(a,window,document)}):"object"===typeof exports?module.exports=function(a,d){a||(a=window);if(!d||!d.fn.dataTable)d=require("datatables.net")(a,d).$;return b(d,a,a.document)}:b(jQuery,window,document)})(function(b,a,d,m){var f=b.fn.dataTable;b.extend(!0,f.defaults,{dom:"<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",renderer:"bootstrap"});b.extend(f.ext.classes, 6 | {sWrapper:"dataTables_wrapper form-inline dt-bootstrap",sFilterInput:"form-control input-sm",sLengthSelect:"form-control input-sm",sProcessing:"dataTables_processing panel panel-default"});f.ext.renderer.pageButton.bootstrap=function(a,h,r,s,j,n){var o=new f.Api(a),t=a.oClasses,k=a.oLanguage.oPaginate,u=a.oLanguage.oAria.paginate||{},e,g,p=0,q=function(d,f){var l,h,i,c,m=function(a){a.preventDefault();!b(a.currentTarget).hasClass("disabled")&&o.page()!=a.data.action&&o.page(a.data.action).draw("page")}; 7 | l=0;for(h=f.length;l",{"class":t.sPageButton+" "+g,id:0===r&&"string"===typeof c?a.sTableId+"_"+c:null}).append(b("",{href:"#", 8 | "aria-controls":a.sTableId,"aria-label":u[c],"data-dt-idx":p,tabindex:a.iTabIndex}).html(e)).appendTo(d),a.oApi._fnBindAction(i,{action:c},m),p++)}},i;try{i=b(h).find(d.activeElement).data("dt-idx")}catch(v){}q(b(h).empty().html(' 56 | ``` 57 | 58 | We need to mark HTML elements in this template using CSS classes that match property names of JSON objects. 59 | If JSON object has **ID**, **Name**, and **Address** properties, the target HTML elements must have **bind-ID**, **bind-Name**, and **bind-Address** CSS classes. 60 | 61 | Once everything is setup, we just need to send AJAX request and bind data from the response into the template: 62 | 63 | ```javascript 64 | $.ajax({url:"api/companies.js", dataType:"json"}) 65 | .done(function(response){ 66 | $("#list").view(response); 67 | }); 68 | ``` 69 | 70 | **view()** method that is applied on a template will take the objects from the argument 71 | and load every object in the list. It will match HTML elemnets in the template with the 72 | properties by name and place the values of the JSON objects as content of HTML fields. This 73 | method will clone
  • items in the template and create one
  • item for every object in the JSON array. You can find live example [here](examples/ajax-list.html). 74 | 75 | 76 | ## See also 77 | 78 | - [Populating HTML form](form) 79 | - [Populating HTML lists](iterators) 80 | - [Populating HTML dropdown from AJAX request](ajax-dropdown) 81 | 82 | [Home](index) 83 | 84 | 85 | -------------------------------------------------------------------------------- /docs/examples/bootstrap/css/dataTables.bootstrap.min.css: -------------------------------------------------------------------------------- 1 | table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:8px;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:8px;right:8px;display:block;font-family:'Glyphicons Halflings';opacity:0.5}table.dataTable thead .sorting:after{opacity:0.2;content:"\e150"}table.dataTable thead .sorting_asc:after{content:"\e155"}table.dataTable thead .sorting_desc:after{content:"\e156"}table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{color:#eee}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody>table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody>table>thead .sorting:after,div.dataTables_scrollBody>table>thead .sorting_asc:after,div.dataTables_scrollBody>table>thead .sorting_desc:after{display:none}div.dataTables_scrollBody>table>tbody>tr:first-child>th,div.dataTables_scrollBody>table>tbody>tr:first-child>td{border-top:none}div.dataTables_scrollFoot>.dataTables_scrollFootInner{box-sizing:content-box}div.dataTables_scrollFoot>.dataTables_scrollFootInner>table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0} 2 | -------------------------------------------------------------------------------- /docs/ajax-dropdown.md: -------------------------------------------------------------------------------- 1 | [Home](index) 2 | # Populating dropdowns from the AJAX calls 3 | 4 | Here is a solution for one common problem. Imagine that you have a dropdown lis tin a form and that you need to populate the values in the list from some remote REST API. 5 | **[JOVN](https://github.com/JocaPC/jquery-view-engine)** is a view engine that simplifies loading of data retrieved using 6 | AJAX requests into dropdowns pages. 7 | 8 | Imagine that you have an API on *api/regions.js* URL that returns all regions that you need to put in some dropdown as JSON response. With **[JOVN](https://github.com/JocaPC/jquery-view-engine)** this is a simple piece of code: 9 | 10 | ```javascript 11 | $.ajax({url:"api/region.js"}) 12 | .done(function(response){ 13 | $("#Region").view(response); 14 | }); 15 | ``` 16 | 17 | Thsi is a standard code that loads data from remote API with AJAX call. the only specific thing is a line `$("#Region").view(response);` that loads the response into dropdown list with id `Region`. With **[JOVN](https://github.com/JocaPC/jquery-view-engine)** you just need one line of code to load JSON data from the response into an element in HTML. 18 | 19 | # How it works? 20 | 21 | Let's imagine that we have an API on the URL *api/regions.js* that returns the following JSON content: 22 | 23 | ```javascript 24 | ["North","West","South","East"] 25 | ``` 26 | 27 | We need to load these object via AJAX call and show them in some HTML SELECT list. 28 | 29 | We just need to define an empty list where the companies be will be placed: 30 | 31 | ```html 32 |
    33 | 34 | 35 | 37 | 38 |
    39 | ``` 40 | Once everything is setup, we just need to send AJAX request and bind data from the response into the template: 41 | 42 | ```javascript 43 | $.ajax({url:"api/regions.js"}) 44 | .done(function(response){ 45 | $("#Region").view(response); 46 | }); 47 | ``` 48 | 49 | **view()** method that is applied on a SELECT list will take the objects from the AJAX response 50 | and load every object in the list. This method will generate and clone 56 | 57 | 58 | 59 | 60 | ``` 61 | **[JOVN](https://github.com/JocaPC/jquery-view-engine)** will use strings from that array to populate value and text of the generated