/index.html
https://github.com/Gazler/Underscore-Template-Loader · HTML · 92 lines · 77 code · 15 blank · 0 comment · 0 complexity · aad20ec551e6a8873425cf777be147b7 MD5 · raw file
- <html>
- <head>
- <script src="jquery-1.6.4.js"></script>
- <script src="underscore.js"></script>
- <script>
- (function() {
- var templateLoader = {
- templateVersion: "0.0.1",
- templates: {},
- loadRemoteTemplate: function(templateName, filename, callback) {
- if (!this.templates[templateName]) {
- var self = this;
- jQuery.get(filename, function(data) {
- self.addTemplate(templateName, data);
- self.saveLocalTemplates();
- callback(data);
- });
- }
- else {
- callback(this.templates[templateName]);
- }
- },
-
- addTemplate: function(templateName, data) {
- this.templates[templateName] = data;
- },
-
- localStorageAvailable: function() {
- try {
- return 'localStorage' in window && window['localStorage'] !== null;
- } catch (e) {
- return false;
- }
- },
-
- saveLocalTemplates: function() {
- if (this.localStorageAvailable) {
- localStorage.setItem("templates", JSON.stringify(this.templates));
- localStorage.setItem("templateVersion", this.templateVersion);
- }
- },
-
- loadLocalTemplates: function() {
- if (this.localStorageAvailable) {
- var templateVersion = localStorage.getItem("templateVersion");
- if (templateVersion && templateVersion == this.templateVersion) {
- var templates = localStorage.getItem("templates");
- if (templates) {
- templates = JSON.parse(templates);
- for (var x in templates) {
- if (!this.templates[x]) {
- this.addTemplate(x, templates[x]);
- }
- }
- }
- }
- else {
- localStorage.removeItem("templates");
- localStorage.removeItem("templateVersion");
- }
- }
- }
-
-
- };
- templateLoader.loadLocalTemplates();
- window.templateLoader = templateLoader;
- })();
-
-
- $(document).ready(function() {
- $('#load_remote_template').click(function() {
- templateLoader.loadRemoteTemplate("test_template", "templates/test_template.txt", function(data) {
- var compiled = _.template(data);
- $('#content').html(compiled({name : 'world'}));
- });
- });
- });
-
-
- </script>
- </head>
-
- <body>
- <span id="load_remote_template">Load Remote Template</span>
- <div id="content"></div>
- </body>
- </html>