├── README.md ├── _config.yml ├── bower.json ├── docs ├── _config.yml ├── ajax-dropdown.md ├── ajax-list.md ├── examples │ ├── ajax-dropdown.html │ ├── ajax-list.html │ ├── api │ │ ├── companies.js │ │ └── regions.js │ ├── bootstrap │ │ ├── css │ │ │ ├── bootstrap.min.css │ │ │ └── dataTables.bootstrap.min.css │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ ├── glyphicons-halflings-regular.woff │ │ │ └── glyphicons-halflings-regular.woff2 │ │ └── js │ │ │ ├── bootstrap.min.js │ │ │ ├── dataTables.bootstrap.min.js │ │ │ ├── jquery.dataTables.min.js │ │ │ └── npm.js │ ├── details.html │ ├── edit.html │ ├── images │ │ └── logo18.jpg │ ├── lib │ │ ├── jquery.js │ │ ├── jquery.view-engine.js │ │ ├── jquery.view-engine.min.js │ │ └── jquery.view-engine.min.js.gz │ ├── list.html │ ├── panels.html │ └── table.html ├── form.md ├── index.md ├── iterators.md └── usage.md ├── src ├── jquery.js ├── jquery.view-engine.js ├── jquery.view-engine.min.js └── jquery.view-engine.min.js.gz └── test ├── basic.html ├── form.html └── qunit ├── qunit-2.4.0.css └── qunit-2.4.0.js /README.md: -------------------------------------------------------------------------------- 1 | # JOVN - JQuery Orthodox View eNgine 2 | 3 | **JOVN** is probably the simplest possible JavaScript View Engine that you can find, and I hope that next-gen view engines will follow this usage pattern. **JOVN** has the following characteristics: 4 | 5 | - **Easy to learn** – There are not custom syntax, placeholders, rules, or constraints. If you know HTML, then you probably already know how to use this view engine. 6 | - **Smart** - has built-in logic that automatically recognizes template elements by type and figure-out how to populate values into the elements. It knows when to set inner text, value, select the option, or repeat the template without some explicit **for** directive. 7 | - **Cross-browser** - it is based on JQuery library, so it will work on any browser that is supported by JQuery. 8 | - **Small** - 1.2KB minified. 9 | 10 | There are no frameworks, or custom templating syntax. Just write the standard/plan HTML code that you want to show in the browser, take your JavaScript object that contains data and bind them. 11 | 12 | **JOVN** is something that I see as the right way (or **Orthodox** - from Greek *ὀρθοδοξία*, orthodoxia – "right opinion") to design client-side view engine from the **front-end developer perspective**. I believe that a view engine needs to be simple and easy to learn because it is not an *equation solver*, it should handle all tedious rules for binding that we constantly use in the scripts, and it should make our life easier. 13 | 14 | **JOVN** is a view engine that follows MVC concepts 15 | 1. You need to prepare pure HTML in your page that represents a template that will be used to show the data, 16 | 2. You need to prepare JavaScript object that represents the model that will be shown in the template, 17 | 3. You need to convert template into the view and provide model object that will be shown in the template: 18 | 19 | ```html 20 | $("div#template").view(data); 21 | ``` 22 | 23 | **JOVN** will handle various types of HTML elements, populate inner text of `P`, `DIV`, `SPAN`, and other simple elements, set the value `INPUT`, `SELECT`, and other form elements, replicate HTML elements that are bound to the arrays, etc. 24 | 25 | If you like the concept see more detaile [HERE](https://jocapc.github.io/jquery-view-engine/) -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /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/_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /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