Javascript Template Engine Use with jQuery

Question

All, I'm trying to use the jQuery File Upload Demo: http://blueimp.github.com/jQuery-File-Upload/

My question is that it says in the Documentation that it uses the Javascript Template Engine (https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine)

However, I'm not familiar with this process. I'm trying to integrate this into my Wordpress blog to allow file uploads this way. Within the index.html it has the following Template defined:

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name">{%=file.name%}</td>
        <td class="size">{%=o.formatFileSize(file.size)%}</td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i> {%=locale.fileupload.start%}
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i> {%=locale.fileupload.cancel%}
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>

I'm using the jQuery Tmpl code (https://github.com/jquery/jquery-tmpl) and when I try and create this in my Wordpress blog I get some errors in my jquery.fileupload-ui.js file on these lines:

_initTemplates: function () {
        var options = this.options;
        options.templateContainer = document.createElement(
            this._files.prop('nodeName')
        );
        options.uploadTemplate = tmpl(options.uploadTemplateId);
        options.downloadTemplate = tmpl(options.downloadTemplateId);
    },

Earlier in this file this is defined as this: uploadTemplateId: 'template-upload',

I'm confused why this wouldn't work or even how to use my own javascript template to do this? When I try and copy these files into my Wordpress blog it always fails and the only thing I don't think I copy is the package.JSON and the .gitignore files in the initial download. What significance do these files play? Just trying to understand what this template is and how to use it?

Anything you can point me to in advance is greatly appreciated! Thanks for the help!

Answer 1

.gitignore is a source control file and not relevant to the scripts - see http://help.github.com/ignore-files/ for more info.

package.JSON is a metadata file for jquery plugins for use by the new jquery plugin site and is nothing to do with the functioning of the plugin you are trying to use - see https://github.com/jquery/plugins.jquery.com#readme for more info.

My best guess for the error is a clash of script files between the plugin and what you already have on wordpress.

Could you post the actual error message(s)?