Knockout.js and jQuery-File-Upload Templates

Question

I have added jQuery-File-Upload code to the page in which I am using Knockout.js. The code uses the JavaScript Templates engine, which works great, but does anyone know if there is a way to use templates for knockouts?

uploadTemplate and downloadTemplate look like function pointers.

According to the docs ... The uploadTemplate and downloadTemplate methods are supposed to return either a jQuery collection object or a string representation of the created upload / download template.

I'm not sure where to start.

Answer 1

We have the same problem. We use knockout in conjunction with jQuery templates (which we will replace with jsRender soon). JQuery-File-Upload (blueImp) upload / download templates are Django templates . I treat these templates as templates in the application. We encapsulated the functionality of loading jQuery files into a knockout custom linker:

ko.bindingHandlers.fileupload = { update: function (element, valueAccessor) { var options = valueAccessor() || {}; //initialize $(element).fileupload(options); } }; 

which we use like this:

 <div id="fileuploadcontrol" data-bind="fileupload: { url: [UPLOAD URL], maxFileSize: [MAX FILE SIZE], acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, completed: function (e, data) { $.each(data.files, function (index, file) { //Stuff to do with uploaded files } } }"> <div class="fileupload-buttonbar"> <!-- buttons --> //STUFF <!-- The global progress bar --> //STUFF </div> </div>