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

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 index 01af15b..5b6e0c6 100644 --- a/bower.json +++ b/bower.json @@ -1,34 +1,32 @@ { "name": "jquery-load-template", - "version": "1.4.5", + "homepage": "http://codepb.github.io/jquery-template/", "authors": [ - { "name": "Paul Burgess"} + "Paul Burgess " ], - "homepage": "http://codepb.github.io/jquery-template/", + "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": "git://github.com/codepb/jquery-template.git" - } - "description": "jQuery plugin for loading and using templates. The plugin is designed to be simple yet powerful, and supports loading templates from within the page, or using AJAX to load html files.", - "main": "jquery-loadTemplate/jquery.loadTemplate.js", + "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", - "bower.json", "loadTemplate.jquery.json", "MIT-LICENSE.txt", "package.json", "readme.md" - ] - "keywords": [ - "templates", - "templating", - "jquery-plugin" - ], + ], "dependencies": { "jquery": ">=1.8" - }, + } } diff --git a/jquery-loadTemplate/jquery.loadTemplate-1.4.5.js b/dist/jquery.loadTemplate.js similarity index 91% rename from jquery-loadTemplate/jquery.loadTemplate-1.4.5.js rename to dist/jquery.loadTemplate.js index 46275a8..aa9ba52 100644 --- a/jquery-loadTemplate/jquery.loadTemplate-1.4.5.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); } }); @@ -309,7 +308,7 @@ }, function ($elem) { $elem.remove(); }); - + processElements("data-href", template, data, settings, function ($elem, value) { $elem.attr("href", applyFormatters($elem, value, "href", settings)); }, function ($elem) { @@ -319,15 +318,19 @@ 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)); }); @@ -353,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) { @@ -520,9 +529,9 @@ var parentElement = options.parentElement || "div"; var template = options.template || options; - + //If a parent is specified, return it; otherwise only return the generated children. - if(options.parentElement) + if (options.parentElement) return $("<" + parentElement + "/>").loadTemplate(template, value, internalSettings); else return $("<" + parentElement + "/>").loadTemplate(template, value, internalSettings).children(); 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("").attr("value",this).text(this).appendTo(e)})}),y(e,n,a),v("data-value",e,n,a,function(t,e){t.val(O(t,e,"value",a))})}function v(e,n,a,i,r,o){t("["+e+"]",n).each(function(){var n=t(this),c=n.attr(e),s=x(a,c);m(n,s,i)?(n.removeAttr(e),void 0!==s&&r?r(n,s):o&&o(n)):n.remove()})}function m(t,e,n){var a=g(t,n);return(!a.ignoreUndefined||void 0!==e)&&((!a.ignoreNull||null!==e)&&(!a.ignoreEmptyString||""!==e))}function g(e,n){var a={};return e instanceof jQuery&&e.attr("data-binding-options")?(a=t.parseJSON(e.attr("data-binding-options")),e.removeAttr("data-binding-options")):"object"==typeof e&&e.hasOwnProperty("bindingOptions")&&(a=e.bindingOptions),t.extend({},n.bindingOptions,a)}function y(e,n,a){t("[data-template-bind]",e).each(function(){var e=t(this),i=t.parseJSON(e.attr("data-template-bind"));e.removeAttr("data-template-bind"),t(i).each(function(){var i;if(i="object"==typeof this.value?x(n,this.value.data):x(n,this.value),this.attribute){if(!m(this,i,a))return void e.remove();switch(this.attribute){case"content":case"innerHTML":e.html(b(e,i,this));break;case"contentAppend":e.append(b(e,i,this));break;case"contentPrepend":e.prepend(b(e,i,this));break;case"contentText":e.text(b(e,i,this));break;case"options":var r=this;t(i).each(function(){t("").attr("value",this[r.value.value]).text(b(e,this[r.value.content],r)).attr("selected",void 0!=typeof this[r.value.selected]&&this[r.value.selected]).appendTo(e)});break;default:e.attr(this.attribute,b(e,i,this))}}})})}function b(t,e,n,a){return n.formatter&&P[n.formatter]?function(a){return P[n.formatter].call(t,e,n.formatOptions,a)}(a):e}function x(t,e){if("this"===e)return t;for(var n,a=e.split("."),i=t;(n=a.shift())&&void 0!==i&&null!=i;)i=i[n];return i}function O(e,n,a,i){var r,o=e.attr("data-format-target");if((o===a||!o&&"content"===a)&&(r=e.attr("data-format"))&&"function"==typeof P[r]){var c=e.attr("data-format-options");return function(a){return P[r].call(e[0],n,c,t.extend({},a))}(i)}return n}var T,w={},k={},P={};n("nestedTemplateFormatter",function(e,n,a){if(n){"string"==typeof n&&"{"===n[0]&&(n=t.parseJSON(n));var i=n.parentElement||"div",r=n.template||n;return n.parentElement?t("<"+i+"/>").loadTemplate(r,e,a):t("<"+i+"/>").loadTemplate(r,e,a).children()}}),t.fn.loadTemplate=e,t.addTemplateFormatter=n}(jQuery); \ No newline at end of file diff --git a/jquery-loadTemplate/jquery.loadTemplate-1.4.5.min.js b/jquery-loadTemplate/jquery.loadTemplate-1.4.5.min.js deleted file mode 100644 index 64dab52..0000000 --- a/jquery-loadTemplate/jquery.loadTemplate-1.4.5.min.js +++ /dev/null @@ -1 +0,0 @@ -(function(a){var v={},u={},h={};function n(F,B,D){var A=this,z,C,E;B=B||{};E=a.extend(true,{async:true,overwriteCache:false,complete:null,success:null,error:function(){a(this).each(function(){a(this).html(E.errorMessage)})},errorMessage:"There was an error loading the template.",paged:false,pageNo:1,elemPerPage:10,append:false,prepend:false,beforeInsert:null,afterInsert:null,bindingOptions:{ignoreUndefined:false,ignoreNull:false,ignoreEmptyString:false}},D);if(a.type(B)==="array"){return s.call(this,F,B,E)}if(!g(F)){z=a(F);if(typeof F==="string"&&F.indexOf("#")===0){E.isFile=false}}C=E.isFile||(typeof E.isFile==="undefined"&&(typeof z==="undefined"||z.length===0));if(C&&!E.overwriteCache&&v[F]){q(F,A,B,E)}else{if(C&&!E.overwriteCache&&v.hasOwnProperty(F)){c(F,A,B,E)}else{if(C){m(F,A,B,E)}else{o(z,A,B,E)}}}return this}function b(A,z){if(z){h[A]=z}else{h=a.extend(h,A)}}function g(z){return typeof z==="string"&&z.indexOf("/")>-1}function s(I,A,F){F=F||{};var z=this,J=A.length,C=F.prepend&&!F.append,B=0,H=0,D=false,E;if(F.paged){var G=(F.pageNo-1)*F.elemPerPage;A=A.slice(G,G+F.elemPerPage);J=A.length}E=a.extend({},F,{complete:function(){if(this.html){if(C){z.prepend(this.html())}else{z.append(this.html())}}B++;if(B===J||D){if(D&&F&&typeof F.error==="function"){F.error.call(z)}if(F&&typeof F.complete==="function"){F.complete()}}},success:function(){H++;if(H===J){if(F&&typeof F.success==="function"){F.success()}}},error:function(){D=true}});if(!F.append&&!F.prepend){z.html("")}if(C){A.reverse()}a(A).each(function(){var K=a("

");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-innerHTML",B,z,A,function(C,D){C.html(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-href",B,z,A,function(C,D){C.attr("href",e(C,D,"href",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-class",B,z,A,function(C,D){C.addClass(e(C,D,"class",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("");E.attr("value",this).text(this).appendTo(C)})});r(B,z,A)}function t(z,E,A,D,B,C){a("["+z+"]",E).each(function(){var F=a(this),G=F.attr(z),H=j(A,G);if(!y(F,H,D)){F.remove();return}F.removeAttr(z);if(typeof H!=="undefined"&&B){B(F,H)}else{if(C){C(F)}}});return}function y(A,C,B){var z=i(A,B);if(z.ignoreUndefined&&typeof C==="undefined"){return false}else{if(z.ignoreNull&&C===null){return false}else{if(z.ignoreEmptyString&&C===""){return false}else{return true}}}}function i(A,B){var z={};if(A instanceof jQuery&&A.attr("data-binding-options")){z=a.parseJSON(A.attr("data-binding-options"));A.removeAttr("data-binding-options")}else{if(typeof A==="object"&&A.hasOwnProperty("bindingOptions")){z=A.bindingOptions}}return a.extend({},B.bindingOptions,z)}function r(B,z,A){a("[data-template-bind]",B).each(function(){var C=a(this),D=a.parseJSON(C.attr("data-template-bind"));C.removeAttr("data-template-bind");a(D).each(function(){var F;if(typeof(this.value)==="object"){F=j(z,this.value.data)}else{F=j(z,this.value)}if(this.attribute){if(!y(this,F,A)){C.remove();return}switch(this.attribute){case"content":case"innerHTML":C.html(d(C,F,this));break;case"contentAppend":C.append(d(C,F,this));break;case"contentPrepend":C.prepend(d(C,F,this));break;case"contentText":C.text(d(C,F,this));break;case"options":var E=this;a(F).each(function(){var G=a("");G.attr("value",this[E.value.value]).text(d(C,this[E.value.content],E)).attr("selected",typeof this[E.value.selected]==undefined?false:this[E.value.selected]).appendTo(C)});break;default:C.attr(this.attribute,d(C,F,this))}}})})}function d(z,C,A,B){if(A.formatter&&h[A.formatter]){return(function(D){return h[A.formatter].call(z,C,A.formatOptions,D)})(B)}return C}function j(z,A){if(A==="this"){return z}var B=A.split("."),C,D=z;while((C=B.shift())&&typeof D!=="undefined"&&D!=null){D=D[C]}return D}function e(z,F,A,E){var D=z.attr("data-format-target"),C;if(D===A||(!D&&A==="content")){C=z.attr("data-format");if(C&&typeof h[C]==="function"){var B=z.attr("data-format-options");return(function(G){return h[C].call(z[0],F,B,a.extend({},G))})(E)}}return F}b("nestedTemplateFormatter",function(D,A,z){if(!A){return}if(typeof A==="string"&&A[0]==="{"){A=a.parseJSON(A)}var B=A.parentElement||"div";var C=A.template||A;if(A.parentElement){return a("<"+B+"/>").loadTemplate(C,D,z)}else{return a("<"+B+"/>").loadTemplate(C,D,z).children()}});a.fn.loadTemplate=n;a.addTemplateFormatter=b})(jQuery); \ No newline at end of file diff --git a/loadTemplate.jquery.json b/loadTemplate.jquery.json index 3ff9610..52192ad 100644 --- a/loadTemplate.jquery.json +++ b/loadTemplate.jquery.json @@ -6,7 +6,7 @@ "templates", "templating" ], - "version": "1.4.5", + "version": "1.5.10", "author": { "name": "Paul Burgess and other contributors", "url": "https://github.com/codepb/jquery-template" diff --git a/package.json b/package.json index 84b6879..f8eee4f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "name": "jquery.loadtemplate", - "version": "1.4.5", + "version": "1.5.10", + "main": "dist/jquery.loadTemplate.js", "author": "Paul Burgess", "description": "jQuery plugin for loading and using templates. The plugin is designed to be simple yet powerful, and supports loading templates from within the page, or using AJAX to load html files.", "homepage": "http://codepb.github.io/jquery-template/", diff --git a/readme.md b/readme.md index 5267759..3b0970f 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,5 @@ # jQuery.loadTemplate +[](https://cdnjs.com/libraries/jquery.loadtemplate) jQuery Template is a jQuery plugin that makes using templates easy and quick. The plugin supports loading HTML files as templates, or taking a jQuery object as the template (usually using script tags to hold the template). @@ -58,9 +59,13 @@ Similarly the content of the template could be held in a separate html file with The plugin has a number of data-... attributes that can be used to populate various attributes with the data. There is also the powerful data-template-bind attribute that accepts a JSON object, enabling binding to any attribute, or the content of the element. +#### Arrays + +You can pass an array of objects instead of a single object and the template will be populated and added to the container for each item in the array. There are options built in that allow you to page the results from an array as well. See the options section below and the included examples. + ### Data Formatters -It is also possible to define data formatters. These are assigned through the `$.addTemplateFormatter` method. This function either accepts a map of functions and the keys that they will be referenced by, or a single function with a single key as two separate parameters. Each formatter takes two values, the value being assigned, and a template to use to define how this data is displayed. The data-format-template may be empty. Example usage of this is below: +It is also possible to define data formatters. These are assigned through the `$.addTemplateFormatter` method. This function either accepts a map of functions and the keys that they will be referenced by, or a single function with a single key as two separate parameters. Each formatter takes two values, the value being assigned, and a template to use to define how this data is displayed. The data-format-options may be empty. Example usage of this is below: $.addTemplateFormatter("UpperCaseFormatter", function(value, template) { @@ -95,7 +100,7 @@ Formatters must be added before they are used else a template will not be able t ### Bindings There are a number of different bindings and ways to bind the data. The following attributes are available: -- "data-innerHTML" (<= 1.4.5) - binds the value supplied to the content (innerHTML) of the element (uses $(elem).html(value)) +- "data-innerHTML" (>= 1.4.5) - binds the value supplied to the content (innerHTML) of the element (uses $(elem).html(value)) - "data-content" - alias for the newer "data-innerHTML" - "data-content-text" - binds the value supplied to the content of the element as text (uses $(elem).text(value)) - "data-content-append" - appends the value to the end of the element (uses $(elem).append(value)) @@ -105,6 +110,7 @@ There are a number of different bindings and ways to bind the data. The followin - "data-alt" - sets the alt value of the element to the value provided (uses $(elem).attr("alt", value)); - "data-value" - sets the value attribute of the element to the value provided (uses $(elem).val(value)) - "data-class" - sets the class attribute of the element to the value provided (uses $(elem).class(value)) +- "data-css" - sets the CSS attribute of the element to the value provided (uses $(elem).css(value)) - "data-link" - sets the innerHtml of the element to be a link to the value provided (wraps the content in an <a> tag). - "data-link-wrap" - wraps the element in a link to the value provided. Same as "data-link", but the <a> tag wraps the element as well as the content. - "data-options" - adds options to a select box. The value for this should reference an array of strings, each option will be output as a separate option. The value will be the same as the displayed text for each option. For a more powerful version of this look at the data-template-bind option. @@ -134,6 +140,7 @@ There are a number of options the plugin accepts. These can be set by passing an The full list of options are: - "overwriteCache" (default false) - Whether to ignore the cache and reload the template (if you've previously loaded the template, but it might have changed, you'll want to set this to true. +- "async" (default true) - Whether to load templates asynchronously (if templates require an Ajax call) - "complete" (default null) - Callback function to call on complete. Will always be called regardless of success or failure. - "success" (default null) - Callback function to call on successful completion. - "error" (default, outputting error message to template container) - Callback function to call on error. diff --git a/tests/files/callback.js b/tests/files/callback.js index b9899d4..40abd43 100644 --- a/tests/files/callback.js +++ b/tests/files/callback.js @@ -49,12 +49,12 @@ afterInsert : function(elem){ sequence.push('after'); + ++afterInsertCounter; + if ($('#render').children().length === afterInsertCounter) { elemSequence.push(true); } - - ++afterInsertCounter; - + }, complete : function(){ sequence.push('complete'); diff --git a/tests/index.html b/tests/index.html index e1d7e36..f0786d9 100644 --- a/tests/index.html +++ b/tests/index.html @@ -3,7 +3,7 @@ - +