Skip to content

Add replace, after and before function #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 35 additions & 11 deletions dist/jquery.loadTemplate.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@
pageNo: 1,
elemPerPage: 10,
append: false,
replace: false,
after: false,
before: false,
prepend: false,
beforeInsert: null,
afterInsert: null,
Expand Down Expand Up @@ -94,15 +97,15 @@
todo = data.length;
}

if (!settings.append && !settings.prepend) {
if (!settings.append && !settings.prepend && !settings.replace && !settings.after && !settings.before) {
$that.html("");
}

newOptions = $.extend(
{},
settings,
{
append: !settings.prepend && true,
append: !settings.prepend && !settings.replace && !settings.after && !settings.before && true,
complete: function (data) {
done++;
if (done === todo || errored) {
Expand Down Expand Up @@ -216,11 +219,17 @@
if (settings.beforeInsert) {
settings.beforeInsert($templateHtml, data);
}
if (settings.append) {

if (settings.append) {
$(this).append($templateHtml);
} else if (settings.prepend) {
$(this).prepend($templateHtml);
} else if (settings.replace) {
$(this).html("").replaceWith($templateHtml);
} else if (settings.after) {
$(this).after($templateHtml);
} else if (settings.before) {
$(this).before($templateHtml);
} else {
$(this).html("").append($templateHtml);
}
Expand Down Expand Up @@ -291,6 +300,18 @@
$elem.append(applyFormatters($elem, value, "content", settings));
});

processElements("data-content-replace", template, data, settings, function ($elem, value) {
$elem.replaceWith(applyFormatters($elem, value, "content", settings));
});

processElements("data-content-after", template, data, settings, function ($elem, value) {
$elem.after(applyFormatters($elem, value, "content", settings));
});

processElements("data-content-before", template, data, settings, function ($elem, value) {
$elem.before(applyFormatters($elem, value, "content", settings));
});

processElements("data-content-prepend", template, data, settings, function ($elem, value) {
$elem.prepend(applyFormatters($elem, value, "content", settings));
});
Expand Down Expand Up @@ -318,19 +339,13 @@
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-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));
});
Expand Down Expand Up @@ -453,6 +468,15 @@
case "contentAppend":
$this.append(applyDataBindFormatters($this, value, this));
break;
case "contentReplace":
$this.replaceWith(applyDataBindFormatters($this, value, this));
break;
case "contentAfter":
$this.after(applyDataBindFormatters($this, value, this));
break;
case "contentBefore":
$this.before(applyDataBindFormatters($this, value, this));
break;
case "contentPrepend":
$this.prepend(applyDataBindFormatters($this, value, this));
break;
Expand Down
2 changes: 1 addition & 1 deletion dist/jquery.loadTemplate.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,8 @@ There are a number of different bindings and ways to bind the data. The followin
- "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))
- "data-content-prepend" - prepends the value to the beginning of the element (uses $(elem).prepend(value))
- "data-content-before" - add the value before the element (uses $(elem).before(value))
- "data-content-after" - add the value after the element (uses $(elem).after(value))
- "data-id" - sets the id of the element to the value provided (uses $(elem).attr("id", value));
- "data-href" - sets the href value of the element to the value provided (uses $(elem).attr("href", value));
- "data-alt" - sets the alt value of the element to the value provided (uses $(elem).attr("alt", value));
Expand Down Expand Up @@ -151,6 +153,8 @@ The full list of options are:
- "elemPerPage" (default 10) - The number of elements to display per page if the data is being paged.
- "append" (default false) - If set to true, the template will be appended to the element rather than replacing the contents of the element.
- "prepend" (default false) - If set to true, the template will be prepended to the element rather than replacing the contents of the element. The append option takes priority over prepend, so if both options are set to true, the element is appended and not prepended.
- "before" (default false) - If set to true, the template will be added before the element rather than replacing the contents of the element.
- "after" (default false) - If set to true, the template will be added after the element rather than replacing the contents of the element.
- "beforeInsert" (default null) - Callback function to be called before inserting the template into the document. The format of the function is function($elem) where $elem is the jQuery object of the populated template about to be inserted into the document.
- "afterInsert" (default null) - As above, a callback function to be called after inserting the template into the document. The format is the same as above.
- "bindingOptions" (default all flags false): add flags to ignore certain types of values. {"ignoreUndefined": false, "ignoreNull": false, "ignoreEmptyString": false}. The flags you set here, are overwritten on an element level by those specified in a template with a "data-binding-options" or a "data-template-bind" attribute. Examples can be found in the Examples/OptionalBinding folder.
Expand Down