├── .gitattributes ├── .gitignore ├── .travis.yml ├── Examples ├── ExampleSearchResults │ ├── Services │ │ └── searchResults.txt │ ├── Templates │ │ └── SearchResult.html │ └── search.html ├── OptionalBinding │ └── example.html ├── SimpleExample │ ├── Templates │ │ └── simple.html │ ├── example.html │ └── img │ │ └── joeBloggs.gif ├── css │ └── default.css └── index.html ├── MIT-LICENSE.txt ├── bower.json ├── dist ├── jquery.loadTemplate.js └── jquery.loadTemplate.min.js ├── loadTemplate.jquery.json ├── package.json ├── readme.md └── tests ├── files ├── bindingOptions.js ├── callback.js ├── error.js ├── formatters.js └── general.js ├── index.html ├── phantom.js ├── testRunner.js └── wru.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components/ 2 | node_modules/ 3 | 4 | ################# 5 | ## Eclipse 6 | ################# 7 | 8 | *.pydevproject 9 | .project 10 | .metadata 11 | bin/ 12 | tmp/ 13 | *.tmp 14 | *.bak 15 | *.swp 16 | *~.nib 17 | local.properties 18 | .classpath 19 | .settings/ 20 | .loadpath 21 | 22 | # External tool builders 23 | .externalToolBuilders/ 24 | 25 | # Locally stored "Eclipse launch configurations" 26 | *.launch 27 | 28 | # CDT-specific 29 | .cproject 30 | 31 | # PDT-specific 32 | .buildpath 33 | 34 | 35 | ################# 36 | ## Visual Studio 37 | ################# 38 | 39 | ## Ignore Visual Studio temporary files, build results, and 40 | ## files generated by popular Visual Studio add-ons. 41 | 42 | # User-specific files 43 | *.suo 44 | *.user 45 | *.sln.docstates 46 | 47 | # Build results 48 | 49 | [Dd]ebug/ 50 | [Rr]elease/ 51 | x64/ 52 | build/ 53 | [Bb]in/ 54 | [Oo]bj/ 55 | 56 | # MSTest test Results 57 | [Tt]est[Rr]esult*/ 58 | [Bb]uild[Ll]og.* 59 | 60 | *_i.c 61 | *_p.c 62 | *.ilk 63 | *.meta 64 | *.obj 65 | *.pch 66 | *.pdb 67 | *.pgc 68 | *.pgd 69 | *.rsp 70 | *.sbr 71 | *.tlb 72 | *.tli 73 | *.tlh 74 | *.tmp 75 | *.tmp_proj 76 | *.log 77 | *.vspscc 78 | *.vssscc 79 | .builds 80 | *.pidb 81 | *.log 82 | *.scc 83 | 84 | # Visual C++ cache files 85 | ipch/ 86 | *.aps 87 | *.ncb 88 | *.opensdf 89 | *.sdf 90 | *.cachefile 91 | 92 | # Visual Studio profiler 93 | *.psess 94 | *.vsp 95 | *.vspx 96 | 97 | # Guidance Automation Toolkit 98 | *.gpState 99 | 100 | # ReSharper is a .NET coding add-in 101 | _ReSharper*/ 102 | *.[Rr]e[Ss]harper 103 | 104 | # TeamCity is a build add-in 105 | _TeamCity* 106 | 107 | # DotCover is a Code Coverage Tool 108 | *.dotCover 109 | 110 | # NCrunch 111 | *.ncrunch* 112 | .*crunch*.local.xml 113 | 114 | # Installshield output folder 115 | [Ee]xpress/ 116 | 117 | # DocProject is a documentation generator add-in 118 | DocProject/buildhelp/ 119 | DocProject/Help/*.HxT 120 | DocProject/Help/*.HxC 121 | DocProject/Help/*.hhc 122 | DocProject/Help/*.hhk 123 | DocProject/Help/*.hhp 124 | DocProject/Help/Html2 125 | DocProject/Help/html 126 | 127 | # Click-Once directory 128 | publish/ 129 | 130 | # Publish Web Output 131 | *.Publish.xml 132 | *.pubxml 133 | 134 | # NuGet Packages Directory 135 | ## TODO: If you have NuGet Package Restore enabled, uncomment the next line 136 | #packages/ 137 | 138 | # Windows Azure Build Output 139 | csx 140 | *.build.csdef 141 | 142 | # Windows Store app package directory 143 | AppPackages/ 144 | 145 | # Others 146 | sql/ 147 | *.Cache 148 | ClientBin/ 149 | [Ss]tyle[Cc]op.* 150 | ~$* 151 | *~ 152 | *.dbmdl 153 | *.[Pp]ublish.xml 154 | *.pfx 155 | *.publishsettings 156 | 157 | # RIA/Silverlight projects 158 | Generated_Code/ 159 | 160 | # Backup & report files from converting an old project file to a newer 161 | # Visual Studio version. Backup files are not needed, because we have git ;-) 162 | _UpgradeReport_Files/ 163 | Backup*/ 164 | UpgradeLog*.XML 165 | UpgradeLog*.htm 166 | 167 | # SQL Server files 168 | App_Data/*.mdf 169 | App_Data/*.ldf 170 | 171 | ############# 172 | ## Windows detritus 173 | ############# 174 | 175 | # Windows image file caches 176 | Thumbs.db 177 | ehthumbs.db 178 | 179 | # Folder config file 180 | Desktop.ini 181 | 182 | # Recycle Bin used on file shares 183 | $RECYCLE.BIN/ 184 | 185 | # Mac crap 186 | .DS_Store 187 | 188 | 189 | ############# 190 | ## Python 191 | ############# 192 | 193 | *.py[co] 194 | 195 | # Packages 196 | *.egg 197 | *.egg-info 198 | build/ 199 | eggs/ 200 | parts/ 201 | var/ 202 | sdist/ 203 | develop-eggs/ 204 | .installed.cfg 205 | 206 | # Installer logs 207 | pip-log.txt 208 | 209 | # Unit test / coverage reports 210 | .coverage 211 | .tox 212 | 213 | #Translations 214 | *.mo 215 | 216 | #Mr Developer 217 | .mr.developer.cfg 218 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | before_script : cd tests 2 | script: phantomjs phantom.js 3 | -------------------------------------------------------------------------------- /Examples/ExampleSearchResults/Services/searchResults.txt: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 2, 4 | "name": "An ice sculpture", 5 | "price": 0.00, 6 | "tags": ["cold", "ice", "sculpture"], 7 | "dimensions": { 8 | "length": 7.0, 9 | "width": 12.0, 10 | "height": 9.5 11 | }, 12 | "warehouseLocation": { 13 | "latitude": -78.75, 14 | "longitude": 20.4 15 | } 16 | }, 17 | { 18 | "id": 3, 19 | "name": "A blue mouse", 20 | "price": 25.50, 21 | "tags": ["blue", "mouse"], 22 | "dimensions": { 23 | "length": 3.1, 24 | "width": 1.0, 25 | "height": 1.0 26 | }, 27 | "warehouseLocation": { 28 | "latitude": 54.4, 29 | "longitude": -32.7 30 | } 31 | }, 32 | { 33 | "id": 4, 34 | "name": "A house", 35 | "price": 250000.50, 36 | "tags": ["house", "accommodation"], 37 | "dimensions": { 38 | "length": 30.1, 39 | "width": 21.0, 40 | "height": 7.0 41 | }, 42 | "warehouseLocation": { 43 | "latitude": -78.75, 44 | "longitude": 20.4 45 | } 46 | }, 47 | { 48 | "id": 5, 49 | "name": "A purple lawnmower", 50 | "price": 45.50, 51 | "tags": ["purple", "lawnmower"], 52 | "dimensions": { 53 | "length": 4.1, 54 | "width": 2.0, 55 | "height": 2.0 56 | }, 57 | "warehouseLocation": { 58 | "latitude": -78.75, 59 | "longitude": 20.4 60 | } 61 | }, 62 | { 63 | "id": 6, 64 | "name": "A green mouse", 65 | "price": 25.50, 66 | "tags": ["green", "mouse"], 67 | "dimensions": { 68 | "length": 3.1, 69 | "width": 1.0, 70 | "height": 1.0 71 | }, 72 | "warehouseLocation": { 73 | "latitude": 54.4, 74 | "longitude": -32.7 75 | } 76 | }, 77 | { 78 | "id": 7, 79 | "name": "A yellow mouse", 80 | "price": 25.50, 81 | "tags": ["yellow", "mouse"], 82 | "dimensions": { 83 | "length": 3.1, 84 | "width": 1.0, 85 | "height": 1.0 86 | }, 87 | "warehouseLocation": { 88 | "latitude": 54.4, 89 | "longitude": -32.7 90 | } 91 | }, 92 | { 93 | "id": 8, 94 | "name": "A white mouse", 95 | "price": 25.50, 96 | "tags": ["white", "mouse"], 97 | "dimensions": { 98 | "length": 3.1, 99 | "width": 1.0, 100 | "height": 1.0 101 | }, 102 | "warehouseLocation": { 103 | "latitude": 54.4, 104 | "longitude": -32.7 105 | } 106 | }, 107 | { 108 | "id": 9, 109 | "name": "A black mouse", 110 | "price": 30.50, 111 | "tags": ["black", "mouse"], 112 | "dimensions": { 113 | "length": 3.1, 114 | "width": 1.0, 115 | "height": 1.0 116 | }, 117 | "warehouseLocation": { 118 | "latitude": 54.4, 119 | "longitude": -32.7 120 | } 121 | }, 122 | { 123 | "id": 10, 124 | "name": "A red mouse", 125 | "price": 30.50, 126 | "tags": ["red", "mouse"], 127 | "dimensions": { 128 | "length": 3.1, 129 | "width": 1.0, 130 | "height": 1.0 131 | }, 132 | "warehouseLocation": { 133 | "latitude": 54.4, 134 | "longitude": -32.7 135 | } 136 | }, 137 | { 138 | "id": 11, 139 | "name": "An orange mouse", 140 | "price": 25.50, 141 | "tags": ["orange", "mouse"], 142 | "dimensions": { 143 | "length": 3.1, 144 | "width": 1.0, 145 | "height": 1.0 146 | }, 147 | "warehouseLocation": { 148 | "latitude": 54.4, 149 | "longitude": -32.7 150 | } 151 | }, 152 | { 153 | "id": 12, 154 | "name": "A stone sculpture", 155 | "price": 12.50, 156 | "tags": ["stone", "sculpture"], 157 | "dimensions": { 158 | "length": 7.0, 159 | "width": 12.0, 160 | "height": 9.5 161 | }, 162 | "warehouseLocation": { 163 | "latitude": -78.75, 164 | "longitude": 20.4 165 | } 166 | }, 167 | { 168 | "id": 13, 169 | "name": "A wood sculpture", 170 | "price": 12.50, 171 | "tags": ["wood", "sculpture", "flammable"], 172 | "dimensions": { 173 | "length": 7.0, 174 | "width": 12.0, 175 | "height": 9.5 176 | }, 177 | "warehouseLocation": { 178 | "latitude": -78.75, 179 | "longitude": 20.4 180 | } 181 | }, 182 | { 183 | "id": 14, 184 | "name": "An iron sculpture", 185 | "price": 12.50, 186 | "tags": ["iron", "sculpture"], 187 | "dimensions": { 188 | "length": 7.0, 189 | "width": 12.0, 190 | "height": 9.5 191 | }, 192 | "warehouseLocation": { 193 | "latitude": -78.75, 194 | "longitude": 20.4 195 | } 196 | }, 197 | { 198 | "id": 15, 199 | "name": "A steel sculpture", 200 | "price": 12.50, 201 | "tags": ["steel", "sculpture"], 202 | "dimensions": { 203 | "length": 7.0, 204 | "width": 12.0, 205 | "height": 9.5 206 | }, 207 | "warehouseLocation": { 208 | "latitude": -78.75, 209 | "longitude": 20.4 210 | } 211 | }, 212 | { 213 | "id": 16, 214 | "name": "A paper sculpture", 215 | "price": 12.50, 216 | "tags": ["paper", "sculpture"], 217 | "dimensions": { 218 | "length": 7.0, 219 | "width": 12.0, 220 | "height": 9.5 221 | }, 222 | "warehouseLocation": { 223 | "latitude": -78.75, 224 | "longitude": 20.4 225 | } 226 | }, 227 | { 228 | "id": 17, 229 | "name": "A flat", 230 | "price": 120000.50, 231 | "tags": ["flat", "accommodation"], 232 | "dimensions": { 233 | "length": 30.1, 234 | "width": 21.0, 235 | "height": 3.0 236 | }, 237 | "warehouseLocation": { 238 | "latitude": -78.75, 239 | "longitude": 20.4 240 | } 241 | }, 242 | { 243 | "id": 18, 244 | "name": "A bungalow", 245 | "price": 160000.50, 246 | "tags": ["bungalow", "accommodation"], 247 | "dimensions": { 248 | "length": 30.1, 249 | "width": 21.0, 250 | "height": 3.0 251 | }, 252 | "warehouseLocation": { 253 | "latitude": -78.75, 254 | "longitude": 20.4 255 | } 256 | }, 257 | { 258 | "id": 19, 259 | "name": "A yellow lawnmower", 260 | "price": 45.50, 261 | "tags": ["yellow", "lawnmower"], 262 | "dimensions": { 263 | "length": 4.1, 264 | "width": 2.0, 265 | "height": 2.0 266 | }, 267 | "warehouseLocation": { 268 | "latitude": -78.75, 269 | "longitude": 20.4 270 | } 271 | }, 272 | { 273 | "id": 20, 274 | "name": "A red lawnmower", 275 | "price": 45.50, 276 | "tags": ["red", "lawnmower"], 277 | "dimensions": { 278 | "length": 4.1, 279 | "width": 2.0, 280 | "height": 2.0 281 | }, 282 | "warehouseLocation": { 283 | "latitude": -78.75, 284 | "longitude": 20.4 285 | } 286 | } 287 | ] -------------------------------------------------------------------------------- /Examples/ExampleSearchResults/Templates/SearchResult.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Examples/ExampleSearchResults/search.html: -------------------------------------------------------------------------------- 1 |

Example of using jQuery.loadTemplate for improved search.

2 |

jQuery.loadTemplate can be used for easily displaying data sets. 3 | The example below is an example of utilising this. When the search button is pressed, 4 | data is fetched from the server in the form of a JSON object. Processing this data is done 5 | client side, and allows for great client experience, sending the minimal amount of data 6 | from the server (just a single json object, and a template). Another benefit this brings 7 | is we have all our data in an easy to manipulate javascript object on the client.

8 |

The example below makes use of paging a javascript array with the jQuery.loadTemplate 9 | function. Simply by passing in options to set paged to true, which page to display, and the 10 | number of elements per page, the function will only output the elements on that page. The 11 | navigation of pages is entirely separate from the function (the next and previous buttons 12 | are not provided).

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
idnamepricetagscoordinates
27 | 28 |
29 | 30 | 31 |
32 | 33 | 91 | -------------------------------------------------------------------------------- /Examples/OptionalBinding/example.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | 15 | 16 | 20 | 21 | 22 | 46 | 47 |
48 | Loaded with function parameters 49 |
50 |
51 | 52 |
53 | 54 |
55 | Loaded with template parameters 56 |
57 |
58 | 59 |
60 | 61 |
62 | Loaded with template as data-bind-template attribute 63 |
64 |
65 | 66 |
67 | Loaded with nested template with function parameters 68 |
69 |
70 | 71 | -------------------------------------------------------------------------------- /Examples/SimpleExample/Templates/simple.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 | 6 | 7 |
11 |
12 |
13 | -------------------------------------------------------------------------------- /Examples/SimpleExample/example.html: -------------------------------------------------------------------------------- 1 |

Example Usage of jQuery.loadTemplate

2 |

Example of loading an html template from the application

3 |

Loading Multiple posts into a single container. Templates loaded from an external source

4 |
5 |

Loading single post into single container. Templates loaded from an external source

6 |
7 |

Example of loading a template from a script tag within the same document.

8 |

Loading a single post into multiple containers. Templates loaded from within the page.

9 |
10 |
11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 | 19 | 27 | 28 | 32 | 33 | 38 | 41 | 42 | 46 | 47 | 50 | 51 | 122 | -------------------------------------------------------------------------------- /Examples/SimpleExample/img/joeBloggs.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codepb/jquery-template/01642159be50b046e62f83c41da91f01bc9fadb3/Examples/SimpleExample/img/joeBloggs.gif -------------------------------------------------------------------------------- /Examples/css/default.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: #555; 3 | font-family: 'Roboto', sans-serif; 4 | width: 100%; 5 | } 6 | h1, h2, h3, h4, h5, h6 { 7 | text-align: center; 8 | font-weight: normal; 9 | margin: 0; 10 | } 11 | .contentContainer p { 12 | text-align: justify; 13 | } 14 | .contentContainer, .codeContainer { 15 | height: 100%; 16 | } 17 | .contentContainer > div, .codeContainer > div { 18 | display: none; 19 | margin: 0 3%; 20 | height: 100%; 21 | vertical-align: top; 22 | } 23 | 24 | .codeContainer pre { 25 | white-space: pre; 26 | word-wrap: normal; 27 | margin: 0; 28 | height: calc(100% - 30px); 29 | } 30 | 31 | .codeContainer code { 32 | overflow: auto; 33 | height: calc(100% - 1em); 34 | } 35 | .nav { 36 | width: 200px; 37 | height: 100%; 38 | display: inline-block; 39 | vertical-align: top; 40 | margin-right: 20px; 41 | } 42 | .contentHead { 43 | height: 30px; 44 | } 45 | .contentContainer div.content { 46 | overflow: auto; 47 | height: calc(100% - 30px); 48 | } 49 | .codeContainer > pre { 50 | overflow: auto; 51 | height: calc(100% - 30px); 52 | } 53 | .head { 54 | height: 100px; 55 | width: 100%; 56 | } 57 | .row { 58 | position: absolute; 59 | } 60 | .body { 61 | top: 100px; 62 | bottom: 60px; 63 | width: 100% 64 | } 65 | 66 | 67 | /* Search Example */ 68 | #ResultsDisplay { 69 | width: 100%; 70 | display: none; 71 | } 72 | 73 | #ResultsPaging { 74 | display: none; 75 | } 76 | 77 | #PerformSearch { 78 | margin-bottom: 3px; 79 | } 80 | 81 | .nav-button { 82 | margin-top: 3px; 83 | } 84 | 85 | /* Simple Example */ 86 | .simple-template-container, .simple-template-container-single { 87 | width: 400px; 88 | border: 1px solid #ccc; 89 | padding: 10px; 90 | margin: 10px; 91 | } 92 | 93 | .simple-template-container img { 94 | display: inline-block; 95 | } 96 | 97 | .simple-template-container .post-container { 98 | display: inline-block; 99 | width: 240px; 100 | margin-left: 10px; 101 | vertical-align: top; 102 | } 103 | 104 | .script-template-container { 105 | width: 140px; 106 | border: 1px dashed #ccc; 107 | padding: 10px; 108 | margin: 10px; 109 | display: inline-block; 110 | } -------------------------------------------------------------------------------- /Examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Examples of jQuery.loadTemplate

17 |
18 | 19 |
20 |
21 |
22 | 28 |
29 |
30 |
31 |
32 |
33 |

Display

34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |

Code

42 |
43 | 
44 |                         
45 |                         
46 |
47 |
48 |
49 |
50 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /MIT-LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Paul Burgess and other contributors, 2 | http://codepb.com 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in 12 | all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | THE SOFTWARE. -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-load-template", 3 | "homepage": "http://codepb.github.io/jquery-template/", 4 | "authors": [ 5 | "Paul Burgess " 6 | ], 7 | "description": "jQuery plugin for loading and using templates. The plugin supports loading templates from within the page, or using AJAX to load html files.", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/codepb/jquery-template.git" 11 | }, 12 | "main": "dist/jquery.loadTemplate.js", 13 | "keywords": [ 14 | "templates", 15 | "templating", 16 | "jquery-plugin" 17 | ], 18 | "ignore": [ 19 | "Examples", 20 | "tests", 21 | ".gitattributes", 22 | ".gitignore", 23 | ".travis.yml", 24 | "loadTemplate.jquery.json", 25 | "MIT-LICENSE.txt", 26 | "package.json", 27 | "readme.md" 28 | ], 29 | "dependencies": { 30 | "jquery": ">=1.8" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /dist/jquery.loadTemplate.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | "use strict"; 3 | var templates = {}, 4 | queue = {}, 5 | formatters = {}, 6 | isArray; 7 | 8 | function loadTemplate(template, data, options) { 9 | var $that = this, 10 | $template, 11 | isFile, 12 | settings; 13 | 14 | data = data || {}; 15 | 16 | settings = $.extend(true, { 17 | // These are the defaults. 18 | async: true, 19 | overwriteCache: false, 20 | complete: null, 21 | success: null, 22 | error: function () { 23 | $(this).each(function () { 24 | $(this).html(settings.errorMessage); 25 | }); 26 | }, 27 | errorMessage: "There was an error loading the template.", 28 | paged: false, 29 | pageNo: 1, 30 | elemPerPage: 10, 31 | append: false, 32 | prepend: false, 33 | beforeInsert: null, 34 | afterInsert: null, 35 | bindingOptions: { 36 | ignoreUndefined: false, 37 | ignoreNull: false, 38 | ignoreEmptyString: false 39 | } 40 | }, options); 41 | 42 | if ($.type(data) === "array") { 43 | isArray = true; 44 | return processArray.call(this, template, data, settings); 45 | } 46 | 47 | if (!containsSlashes(template)) { 48 | $template = $(template); 49 | if (typeof template === 'string' && template.indexOf('#') === 0) { 50 | settings.isFile = false; 51 | } 52 | } 53 | 54 | isFile = settings.isFile || (typeof settings.isFile === "undefined" && (typeof $template === "undefined" || $template.length === 0)); 55 | 56 | if (isFile && !settings.overwriteCache && templates[template]) { 57 | prepareTemplateFromCache(template, $that, data, settings); 58 | } else if (isFile && !settings.overwriteCache && templates.hasOwnProperty(template)) { 59 | addToQueue(template, $that, data, settings); 60 | } else if (isFile) { 61 | loadAndPrepareTemplate(template, $that, data, settings); 62 | } else { 63 | loadTemplateFromDocument($template, $that, data, settings); 64 | } 65 | return this; 66 | } 67 | 68 | function addTemplateFormatter(key, formatter) { 69 | if (formatter) { 70 | formatters[key] = formatter; 71 | } else { 72 | formatters = $.extend(formatters, key); 73 | } 74 | } 75 | 76 | function containsSlashes(str) { 77 | return typeof str === "string" && str.indexOf("/") > -1; 78 | } 79 | 80 | function processArray(template, data, settings) { 81 | settings = settings || {}; 82 | var $that = this, 83 | todo = data.length, 84 | doPrepend = settings.prepend && !settings.append, 85 | done = 0, 86 | success = 0, 87 | errored = false, 88 | errorObjects = [], 89 | newOptions; 90 | 91 | if (settings.paged) { 92 | var startNo = (settings.pageNo - 1) * settings.elemPerPage; 93 | data = data.slice(startNo, startNo + settings.elemPerPage); 94 | todo = data.length; 95 | } 96 | 97 | if (!settings.append && !settings.prepend) { 98 | $that.html(""); 99 | } 100 | 101 | newOptions = $.extend( 102 | {}, 103 | settings, 104 | { 105 | append: !settings.prepend && true, 106 | complete: function (data) { 107 | done++; 108 | if (done === todo || errored) { 109 | if (errored && settings && typeof settings.error === "function") { 110 | settings.error.call($that, errorObjects); 111 | } 112 | if (settings && typeof settings.complete === "function") { 113 | settings.complete(); 114 | } 115 | } 116 | }, 117 | success: function () { 118 | success++; 119 | if (success === todo) { 120 | if (settings && typeof settings.success === "function") { 121 | settings.success(); 122 | } 123 | } 124 | }, 125 | error: function (e) { 126 | errored = true; 127 | errorObjects.push(e); 128 | } 129 | } 130 | ); 131 | 132 | 133 | 134 | if (doPrepend) data.reverse(); 135 | $(data).each(function () { 136 | 137 | loadTemplate.call($that, template, this, newOptions); 138 | if (errored) { 139 | return false; 140 | } 141 | }); 142 | 143 | return this; 144 | } 145 | 146 | function addToQueue(template, selection, data, settings) { 147 | if (queue[template]) { 148 | queue[template].push({ data: data, selection: selection, settings: settings }); 149 | } else { 150 | queue[template] = [{ data: data, selection: selection, settings: settings}]; 151 | } 152 | } 153 | 154 | function prepareTemplateFromCache(template, selection, data, settings) { 155 | var $templateContainer = templates[template].clone(); 156 | 157 | prepareTemplate.call(selection, $templateContainer, data, settings); 158 | if (typeof settings.success === "function") { 159 | settings.success(); 160 | } 161 | } 162 | 163 | function uniqueId() { 164 | return new Date().getTime(); 165 | } 166 | 167 | function urlAvoidCache(url) { 168 | if (url.indexOf('?') !== -1) { 169 | return url + "&_=" + uniqueId(); 170 | } 171 | else { 172 | return url + "?_=" + uniqueId(); 173 | } 174 | } 175 | 176 | function loadAndPrepareTemplate(template, selection, data, settings) { 177 | 178 | templates[template] = null; 179 | var templateUrl = template; 180 | if (settings.overwriteCache) { 181 | templateUrl = urlAvoidCache(templateUrl); 182 | } 183 | $.ajax({ 184 | url: templateUrl, 185 | async: settings.async, 186 | success: function (templateContent) { 187 | handleTemplateLoadingSuccess($(templateContent), template, selection, data, settings); 188 | }, 189 | error: function (e) { 190 | handleTemplateLoadingError(template, selection, data, settings, e); 191 | } 192 | }); 193 | } 194 | 195 | function loadTemplateFromDocument($template, selection, data, settings) { 196 | if ($template.is("script") || $template.is("template")) { 197 | $template = $.parseHTML($.trim($template.html())); 198 | } 199 | 200 | prepareTemplate.call(selection, $template, data, settings); 201 | 202 | if (typeof settings.success === "function") { 203 | settings.success(); 204 | } 205 | } 206 | 207 | function prepareTemplate(template, data, settings) { 208 | var template = $("
").append(template); 209 | bindData(template, data, settings); 210 | 211 | $(this).each(function () { 212 | var $templateHtml = template.children().clone(true); 213 | $("select", $templateHtml).each(function (key, value) { 214 | $(this).val($("select", template).eq(key).val()) 215 | }); 216 | if (settings.beforeInsert) { 217 | settings.beforeInsert($templateHtml, data); 218 | } 219 | if (settings.append) { 220 | 221 | $(this).append($templateHtml); 222 | } else if (settings.prepend) { 223 | $(this).prepend($templateHtml); 224 | } else { 225 | $(this).html("").append($templateHtml); 226 | } 227 | if (settings.afterInsert) { 228 | settings.afterInsert($templateHtml, data); 229 | } 230 | }); 231 | 232 | if (typeof settings.complete === "function") { 233 | settings.complete.call($(this), data); 234 | } 235 | } 236 | 237 | function handleTemplateLoadingError(template, selection, data, settings, error) { 238 | var value; 239 | 240 | if (typeof settings.error === "function") { 241 | settings.error.call(selection, error); 242 | } 243 | 244 | $(queue[template]).each(function (key, value) { 245 | if (typeof value.settings.error === "function") { 246 | value.settings.error.call(value.selection, error); 247 | } 248 | }); 249 | 250 | if (typeof settings.complete === "function") { 251 | settings.complete.call(selection); 252 | } 253 | 254 | while (queue[template] && (value = queue[template].shift())) { 255 | if (typeof value.settings.complete === "function") { 256 | value.settings.complete.call(value.selection); 257 | } 258 | } 259 | 260 | if (typeof queue[template] !== 'undefined' && queue[template].length > 0) { 261 | queue[template] = []; 262 | } 263 | } 264 | 265 | function handleTemplateLoadingSuccess($templateContainer, template, selection, data, settings) { 266 | var value; 267 | 268 | templates[template] = $templateContainer.clone(); 269 | prepareTemplate.call(selection, $templateContainer, data, settings); 270 | 271 | if (typeof settings.success === "function") { 272 | settings.success.call(selection); 273 | } 274 | 275 | while (queue[template] && (value = queue[template].shift())) { 276 | prepareTemplate.call(value.selection, templates[template].clone(), value.data, value.settings); 277 | if (typeof value.settings.success === "function") { 278 | value.settings.success.call(value.selection); 279 | } 280 | } 281 | } 282 | 283 | function bindData(template, data, settings) { 284 | data = data || {}; 285 | 286 | processElements("data-content", template, data, settings, function ($elem, value) { 287 | $elem.html(applyFormatters($elem, value, "content", settings)); 288 | }); 289 | 290 | processElements("data-content-append", template, data, settings, function ($elem, value) { 291 | $elem.append(applyFormatters($elem, value, "content", settings)); 292 | }); 293 | 294 | processElements("data-content-prepend", template, data, settings, function ($elem, value) { 295 | $elem.prepend(applyFormatters($elem, value, "content", settings)); 296 | }); 297 | 298 | processElements("data-content-text", template, data, settings, function ($elem, value) { 299 | $elem.text(applyFormatters($elem, value, "content", settings)); 300 | }); 301 | 302 | processElements("data-innerHTML", template, data, settings, function ($elem, value) { 303 | $elem.html(applyFormatters($elem, value, "content", settings)); 304 | }); 305 | 306 | processElements("data-src", template, data, settings, function ($elem, value) { 307 | $elem.attr("src", applyFormatters($elem, value, "src", settings)); 308 | }, function ($elem) { 309 | $elem.remove(); 310 | }); 311 | 312 | processElements("data-href", template, data, settings, function ($elem, value) { 313 | $elem.attr("href", applyFormatters($elem, value, "href", settings)); 314 | }, function ($elem) { 315 | $elem.remove(); 316 | }); 317 | 318 | processElements("data-alt", template, data, settings, function ($elem, value) { 319 | $elem.attr("alt", applyFormatters($elem, value, "alt", settings)); 320 | }); 321 | 322 | processElements("data-title", template, data, settings, function ($elem, value) { 323 | $elem.attr("title", applyFormatters($elem, value, "title", settings)); 324 | }); 325 | 326 | processElements("data-id", template, data, settings, function ($elem, value) { 327 | $elem.attr("id", applyFormatters($elem, value, "id", settings)); 328 | }); 329 | 330 | processElements("data-css", template, data, settings, function ($elem, value) { 331 | $elem.css(applyFormatters($elem, value, "css", settings)) 332 | }); 333 | 334 | processElements("data-class", template, data, settings, function ($elem, value) { 335 | $elem.addClass(applyFormatters($elem, value, "class", settings)); 336 | }); 337 | 338 | processElements("data-link", template, data, settings, function ($elem, value) { 339 | var $linkElem = $(""); 340 | $linkElem.attr("href", applyFormatters($elem, value, "link", settings)); 341 | $linkElem.html($elem.html()); 342 | $elem.html($linkElem); 343 | }); 344 | 345 | processElements("data-link-wrap", template, data, settings, function ($elem, value) { 346 | var $linkElem = $(""); 347 | $linkElem.attr("href", applyFormatters($elem, value, "link-wrap", settings)); 348 | $elem.wrap($linkElem); 349 | }); 350 | 351 | processElements("data-options", template, data, settings, function ($elem, value) { 352 | $(value).each(function () { 353 | var $option = $("
").append(e),n,a),t(this).each(function(){var i=e.children().clone(!0);t("select",i).each(function(n,a){t(this).val(t("select",e).eq(n).val())}),a.beforeInsert&&a.beforeInsert(i,n),a.append?t(this).append(i):a.prepend?t(this).prepend(i):t(this).html("").append(i),a.afterInsert&&a.afterInsert(i,n)}),"function"==typeof a.complete&&a.complete.call(t(this),n)}function p(e,n,a,i,r){var o;for("function"==typeof i.error&&i.error.call(n,r),t(k[e]).each(function(t,e){"function"==typeof e.settings.error&&e.settings.error.call(e.selection,r)}),"function"==typeof i.complete&&i.complete.call(n);k[e]&&(o=k[e].shift());)"function"==typeof o.settings.complete&&o.settings.complete.call(o.selection);void 0!==k[e]&&k[e].length>0&&(k[e]=[])}function d(t,e,n,a,i){var r;for(w[e]=t.clone(),f.call(n,t,a,i),"function"==typeof i.success&&i.success.call(n);k[e]&&(r=k[e].shift());)f.call(r.selection,w[e].clone(),r.data,r.settings),"function"==typeof r.settings.success&&r.settings.success.call(r.selection)}function h(e,n,a){v("data-content",e,n=n||{},a,function(t,e){t.html(O(t,e,"content",a))}),v("data-content-append",e,n,a,function(t,e){t.append(O(t,e,"content",a))}),v("data-content-prepend",e,n,a,function(t,e){t.prepend(O(t,e,"content",a))}),v("data-content-text",e,n,a,function(t,e){t.text(O(t,e,"content",a))}),v("data-innerHTML",e,n,a,function(t,e){t.html(O(t,e,"content",a))}),v("data-src",e,n,a,function(t,e){t.attr("src",O(t,e,"src",a))},function(t){t.remove()}),v("data-href",e,n,a,function(t,e){t.attr("href",O(t,e,"href",a))},function(t){t.remove()}),v("data-alt",e,n,a,function(t,e){t.attr("alt",O(t,e,"alt",a))}),v("data-title",e,n,a,function(t,e){t.attr("title",O(t,e,"title",a))}),v("data-id",e,n,a,function(t,e){t.attr("id",O(t,e,"id",a))}),v("data-css",e,n,a,function(t,e){t.css(O(t,e,"css",a))}),v("data-class",e,n,a,function(t,e){t.addClass(O(t,e,"class",a))}),v("data-link",e,n,a,function(e,n){var i=t("");i.attr("href",O(e,n,"link",a)),i.html(e.html()),e.html(i)}),v("data-link-wrap",e,n,a,function(e,n){var i=t("");i.attr("href",O(e,n,"link-wrap",a)),e.wrap(i)}),v("data-options",e,n,a,function(e,n){t(n).each(function(){t("