diff --git a/.gitignore b/.gitignore index b9d6bd9..3835d69 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ +bower_components/ +node_modules/ + ################# ## Eclipse ################# @@ -192,7 +195,6 @@ $RECYCLE.BIN/ # Packages *.egg *.egg-info -dist/ build/ eggs/ parts/ diff --git a/Examples/SimpleExample/Templates/simple.html b/Examples/SimpleExample/Templates/simple.html index dc613aa..2e75af5 100644 --- a/Examples/SimpleExample/Templates/simple.html +++ b/Examples/SimpleExample/Templates/simple.html @@ -3,9 +3,9 @@
- +
diff --git a/Examples/SimpleExample/example.html b/Examples/SimpleExample/example.html index 2a169b7..d54b719 100644 --- a/Examples/SimpleExample/example.html +++ b/Examples/SimpleExample/example.html @@ -19,7 +19,7 @@

Example of loading a template from a script tag within the same document. - +
@@ -81,7 +81,7 @@

Code

$($div).load($(this).attr("href"), function () { $(".contentContainer > div").hide(); $(".codeContainer > div").hide(); - $(".contentContainer div.content").html($div.html()); + $(".contentContainer div.content").html("").append($div); $(".codeContainer pre code").text($div.html()); if(highlightSupported()) { $(".codeContainer pre code").each(function () { diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..5b6e0c6 --- /dev/null +++ b/bower.json @@ -0,0 +1,32 @@ +{ + "name": "jquery-load-template", + "homepage": "http://codepb.github.io/jquery-template/", + "authors": [ + "Paul Burgess " + ], + "description": "jQuery plugin for loading and using templates. The plugin supports loading templates from within the page, or using AJAX to load html files.", + "repository": { + "type": "git", + "url": "https://github.com/codepb/jquery-template.git" + }, + "main": "dist/jquery.loadTemplate.js", + "keywords": [ + "templates", + "templating", + "jquery-plugin" + ], + "ignore": [ + "Examples", + "tests", + ".gitattributes", + ".gitignore", + ".travis.yml", + "loadTemplate.jquery.json", + "MIT-LICENSE.txt", + "package.json", + "readme.md" + ], + "dependencies": { + "jquery": ">=1.8" + } +} diff --git a/jquery-loadTemplate/jquery.loadTemplate-1.4.3.js b/dist/jquery.loadTemplate.js similarity index 86% rename from jquery-loadTemplate/jquery.loadTemplate-1.4.3.js rename to dist/jquery.loadTemplate.js index 52c43a0..aa9ba52 100644 --- a/jquery-loadTemplate/jquery.loadTemplate-1.4.3.js +++ b/dist/jquery.loadTemplate.js @@ -2,7 +2,8 @@ "use strict"; var templates = {}, queue = {}, - formatters = {}; + formatters = {}, + isArray; function loadTemplate(template, data, options) { var $that = this, @@ -39,6 +40,7 @@ }, options); if ($.type(data) === "array") { + isArray = true; return processArray.call(this, template, data, settings); } @@ -83,6 +85,7 @@ done = 0, success = 0, errored = false, + errorObjects = [], newOptions; if (settings.paged) { @@ -91,22 +94,20 @@ todo = data.length; } + if (!settings.append && !settings.prepend) { + $that.html(""); + } + newOptions = $.extend( {}, settings, { - complete: function () { - if (this.html) { - if (doPrepend) { - $that.prepend(this.html()); - } else { - $that.append(this.html()); - } - } + append: !settings.prepend && true, + complete: function (data) { done++; if (done === todo || errored) { if (errored && settings && typeof settings.error === "function") { - settings.error.call($that); + settings.error.call($that, errorObjects); } if (settings && typeof settings.complete === "function") { settings.complete(); @@ -121,20 +122,19 @@ } } }, - error: function () { + error: function (e) { errored = true; + errorObjects.push(e); } } ); - if (!settings.append && !settings.prepend) { - $that.html(""); - } + if (doPrepend) data.reverse(); $(data).each(function () { - var $div = $("
"); - loadTemplate.call($div, template, this, newOptions); + + loadTemplate.call($that, template, this, newOptions); if (errored) { return false; } @@ -174,7 +174,6 @@ } function loadAndPrepareTemplate(template, selection, data, settings) { - var $templateContainer = $("
"); templates[template] = null; var templateUrl = template; @@ -185,24 +184,20 @@ url: templateUrl, async: settings.async, success: function (templateContent) { - $templateContainer.html(templateContent); - handleTemplateLoadingSuccess($templateContainer, template, selection, data, settings); + handleTemplateLoadingSuccess($(templateContent), template, selection, data, settings); }, - error: function () { - handleTemplateLoadingError(template, selection, data, settings); + error: function (e) { + handleTemplateLoadingError(template, selection, data, settings, e); } }); } function loadTemplateFromDocument($template, selection, data, settings) { - var $templateContainer = $("
"); - if ($template.is("script") || $template.is("template")) { $template = $.parseHTML($.trim($template.html())); } - $templateContainer.html($template); - prepareTemplate.call(selection, $templateContainer, data, settings); + prepareTemplate.call(selection, $template, data, settings); if (typeof settings.success === "function") { settings.success(); @@ -210,12 +205,16 @@ } function prepareTemplate(template, data, settings) { + var template = $("
").append(template); bindData(template, data, settings); $(this).each(function () { - var $templateHtml = $(template.html()); + var $templateHtml = template.children().clone(true); + $("select", $templateHtml).each(function (key, value) { + $(this).val($("select", template).eq(key).val()) + }); if (settings.beforeInsert) { - settings.beforeInsert($templateHtml); + settings.beforeInsert($templateHtml, data); } if (settings.append) { @@ -223,28 +222,28 @@ } else if (settings.prepend) { $(this).prepend($templateHtml); } else { - $(this).html($templateHtml); + $(this).html("").append($templateHtml); } if (settings.afterInsert) { - settings.afterInsert($templateHtml); + settings.afterInsert($templateHtml, data); } }); if (typeof settings.complete === "function") { - settings.complete.call($(this)); + settings.complete.call($(this), data); } } - function handleTemplateLoadingError(template, selection, data, settings) { + function handleTemplateLoadingError(template, selection, data, settings, error) { var value; if (typeof settings.error === "function") { - settings.error.call(selection); + settings.error.call(selection, error); } $(queue[template]).each(function (key, value) { if (typeof value.settings.error === "function") { - value.settings.error.call(value.selection); + value.settings.error.call(value.selection, error); } }); @@ -300,22 +299,40 @@ $elem.text(applyFormatters($elem, value, "content", settings)); }); + processElements("data-innerHTML", template, data, settings, function ($elem, value) { + $elem.html(applyFormatters($elem, value, "content", settings)); + }); + processElements("data-src", template, data, settings, function ($elem, value) { $elem.attr("src", applyFormatters($elem, value, "src", settings)); }, function ($elem) { $elem.remove(); }); + processElements("data-href", template, data, settings, function ($elem, value) { + $elem.attr("href", applyFormatters($elem, value, "href", settings)); + }, function ($elem) { + $elem.remove(); + }); + processElements("data-alt", template, data, settings, function ($elem, value) { $elem.attr("alt", applyFormatters($elem, value, "alt", settings)); }); + + processElements("data-title", template, data, settings, function ($elem, value) { + $elem.attr("title", applyFormatters($elem, value, "title", settings)); + }); processElements("data-id", template, data, settings, function ($elem, value) { $elem.attr("id", applyFormatters($elem, value, "id", settings)); }); - processElements("data-value", template, data, settings, function ($elem, value) { - $elem.attr("value", applyFormatters($elem, value, "value", settings)); + processElements("data-css", template, data, settings, function ($elem, value) { + $elem.css(applyFormatters($elem, value, "css", settings)) + }); + + processElements("data-class", template, data, settings, function ($elem, value) { + $elem.addClass(applyFormatters($elem, value, "class", settings)); }); processElements("data-link", template, data, settings, function ($elem, value) { @@ -339,6 +356,12 @@ }); processAllElements(template, data, settings); + + processElements("data-value", template, data, settings, function ($elem, value) { + $elem.val(applyFormatters($elem, value, "value", settings)); + }); + + } function processElements(attribute, template, data, settings, dataBindFunction, noDataFunction) { @@ -424,6 +447,7 @@ switch (this.attribute) { case "content": + case "innerHTML": $this.html(applyDataBindFormatters($this, value, this)); break; case "contentAppend": @@ -471,7 +495,7 @@ part, value = data; - while ((part = paramParts.shift()) && typeof value !== "undefined") { + while ((part = paramParts.shift()) && typeof value !== "undefined" && value != null) { value = value[part]; } @@ -505,7 +529,12 @@ var parentElement = options.parentElement || "div"; var template = options.template || options; - return $("<" + parentElement + "/>").loadTemplate(template, value, internalSettings); + + //If a parent is specified, return it; otherwise only return the generated children. + if (options.parentElement) + return $("<" + parentElement + "/>").loadTemplate(template, value, internalSettings); + else + return $("<" + parentElement + "/>").loadTemplate(template, value, internalSettings).children(); }); $.fn.loadTemplate = loadTemplate; $.addTemplateFormatter = addTemplateFormatter; diff --git a/dist/jquery.loadTemplate.min.js b/dist/jquery.loadTemplate.min.js new file mode 100644 index 0000000..bf88099 --- /dev/null +++ b/dist/jquery.loadTemplate.min.js @@ -0,0 +1 @@ +!function(t){"use strict";function e(e,n,c){var s,f,p,d=this;return n=n||{},p=t.extend(!0,{async:!0,overwriteCache:!1,complete:null,success:null,error:function(){t(this).each(function(){t(this).html(p.errorMessage)})},errorMessage:"There was an error loading the template.",paged:!1,pageNo:1,elemPerPage:10,append:!1,prepend:!1,beforeInsert:null,afterInsert:null,bindingOptions:{ignoreUndefined:!1,ignoreNull:!1,ignoreEmptyString:!1}},c),"array"===t.type(n)?(T=!0,i.call(this,e,n,p)):(a(e)||(s=t(e),"string"==typeof e&&0===e.indexOf("#")&&(p.isFile=!1)),f=p.isFile||void 0===p.isFile&&(void 0===s||0===s.length),f&&!p.overwriteCache&&w[e]?o(e,d,n,p):f&&!p.overwriteCache&&w.hasOwnProperty(e)?r(e,d,n,p):f?l(e,d,n,p):u(s,d,n,p),this)}function n(e,n){n?P[e]=n:P=t.extend(P,e)}function a(t){return"string"==typeof t&&t.indexOf("/")>-1}function i(n,a,i){i=i||{};var r,o=this,c=a.length,s=i.prepend&&!i.append,l=0,u=0,f=!1,p=[];if(i.paged){var d=(i.pageNo-1)*i.elemPerPage;a=a.slice(d,d+i.elemPerPage),c=a.length}return i.append||i.prepend||o.html(""),r=t.extend({},i,{append:!i.prepend&&!0,complete:function(t){(++l===c||f)&&(f&&i&&"function"==typeof i.error&&i.error.call(o,p),i&&"function"==typeof i.complete&&i.complete())},success:function(){++u===c&&i&&"function"==typeof i.success&&i.success()},error:function(t){f=!0,p.push(t)}}),s&&a.reverse(),t(a).each(function(){if(e.call(o,n,this,r),f)return!1}),this}function r(t,e,n,a){k[t]?k[t].push({data:n,selection:e,settings:a}):k[t]=[{data:n,selection:e,settings:a}]}function o(t,e,n,a){var i=w[t].clone();f.call(e,i,n,a),"function"==typeof a.success&&a.success()}function c(){return(new Date).getTime()}function s(t){return-1!==t.indexOf("?")?t+"&_="+c():t+"?_="+c()}function l(e,n,a,i){w[e]=null;var r=e;i.overwriteCache&&(r=s(r)),t.ajax({url:r,async:i.async,success:function(r){d(t(r),e,n,a,i)},error:function(t){p(e,n,a,i,t)}})}function u(e,n,a,i){(e.is("script")||e.is("template"))&&(e=t.parseHTML(t.trim(e.html()))),f.call(n,e,a,i),"function"==typeof i.success&&i.success()}function f(e,n,a){h(e=t("
").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("
");n.call(K,I,this,E);if(D){return false}});return this}function c(C,A,z,B){if(u[C]){u[C].push({data:z,selection:A,settings:B})}else{u[C]=[{data:z,selection:A,settings:B}]}}function q(D,B,A,C){var z=v[D].clone();p.call(B,z,A,C);if(typeof C.success==="function"){C.success()}}function w(){return new Date().getTime()}function x(z){if(z.indexOf("?")!==-1){return z+"&_="+w()}else{return z+"?_="+w()}}function m(D,B,A,C){var z=a("
");v[D]=null;var E=D;if(C.overwriteCache){E=x(E)}a.ajax({url:E,async:C.async,success:function(F){z.html(F);l(z,D,B,A,C)},error:function(){k(D,B,A,C)}})}function o(z,C,B,D){var A=a("
");if(z.is("script")||z.is("template")){z=a.parseHTML(a.trim(z.html()))}A.html(z);p.call(C,A,B,D);if(typeof D.success==="function"){D.success()}}function p(B,z,A){f(B,z,A);a(this).each(function(){var C=a(B.html());if(A.beforeInsert){A.beforeInsert(C)}if(A.append){a(this).append(C)}else{if(A.prepend){a(this).prepend(C)}else{a(this).html(C)}}if(A.afterInsert){A.afterInsert(C)}});if(typeof A.complete==="function"){A.complete.call(a(this))}}function k(C,A,z,B){var D;if(typeof B.error==="function"){B.error.call(A)}a(u[C]).each(function(E,F){if(typeof F.settings.error==="function"){F.settings.error.call(F.selection)}});if(typeof B.complete==="function"){B.complete.call(A)}while(u[C]&&(D=u[C].shift())){if(typeof D.settings.complete==="function"){D.settings.complete.call(D.selection)}}if(typeof u[C]!=="undefined"&&u[C].length>0){u[C]=[]}}function l(z,D,B,A,C){var E;v[D]=z.clone();p.call(B,z,A,C);if(typeof C.success==="function"){C.success.call(B)}while(u[D]&&(E=u[D].shift())){p.call(E.selection,v[D].clone(),E.data,E.settings);if(typeof E.settings.success==="function"){E.settings.success.call(E.selection)}}}function f(B,z,A){z=z||{};t("data-content",B,z,A,function(C,D){C.html(e(C,D,"content",A))});t("data-content-append",B,z,A,function(C,D){C.append(e(C,D,"content",A))});t("data-content-prepend",B,z,A,function(C,D){C.prepend(e(C,D,"content",A))});t("data-content-text",B,z,A,function(C,D){C.text(e(C,D,"content",A))});t("data-src",B,z,A,function(C,D){C.attr("src",e(C,D,"src",A))},function(C){C.remove()});t("data-alt",B,z,A,function(C,D){C.attr("alt",e(C,D,"alt",A))});t("data-id",B,z,A,function(C,D){C.attr("id",e(C,D,"id",A))});t("data-value",B,z,A,function(C,D){C.attr("value",e(C,D,"value",A))});t("data-link",B,z,A,function(C,E){var D=a("");D.attr("href",e(C,E,"link",A));D.html(C.html());C.html(D)});t("data-link-wrap",B,z,A,function(C,E){var D=a("");D.attr("href",e(C,E,"link-wrap",A));C.wrap(D)});t("data-options",B,z,A,function(C,D){a(D).each(function(){var E=a("