append-template
v1.0.0
Published
A jQuery plugin that lets you insert a file into the DOM, after defining variables to be added within the file.
Downloads
8
Maintainers
Readme
Sick of appending large chunks of HTML from your scripts? I am.
// Ew.
$(".sidebar").append("<div class='inner-wrapper'><div class='heading'>Welcome, " + username + "!</div><div class='about'>They're from " + country + ".</div></div>");
Introducing: .appendTemplate()
.appendTemplate is a jQuery plugin that lets you insert a file into the DOM, after defining variables to be added within the file. Check it out...
<!-- index.html -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="appendTemplate.jquery.min.js"></script>
<div class="container"></div>
<script type="text/javascript">
$(".container").appendTemplate("templates/user_profile.html", {username: "@adammcarth", country: "Australia"});
</script>
<!-- templates/user_profile.html -->
<h1>Welcome, {{username}}!</h1>
<p>They come from {{country}}.</p>
Usage
appendTemplate( file_location, variables, callback, prepend );
Set the final argument of the function to true
to prepend instead of append.
Local File System Warning
Most browsers won't allow you to open files from your local system, so if you're developing without a web server (just in plain HTML), you could run into some troubles. Google chrome users can try starting chrome with --allow-file-access-from-files
. Read more: http://stackoverflow.com/questions/4208530/xmlhttprequest-origin-null-is-not-allowed-access-control-allow-origin-for-file
Contributing
Contributions are always welcome:
- Fork this repository.
- Create a new branch:
git checkout -b my-new-feature
- Minify your changes using an online compressor of your choice.
- Send in a pull request!