CODEWITHSUNDEEP
knockout.jsjquery-file-upload
user1630508
user1630508

Reputation: 95

Knockout.js templates and jQuery-File-Upload

I have added the jQuery-File-Upload code to a page I use Knockout.js. The code uses the JavaScript Templates engine, which works fine, but does anyone know if there's a way to use Knockout's templates?

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 rendered upload / download template.

I'm not sure where to start.

Upvotes: 4

Views: 5187

Answers (1)

yoerids
yoerids

Reputation: 918

We are having the same problem. We use knockout in combination with jQuery Templates (which we will soon replace with jsRender). The download/upload templates of the JQuery-File-Upload (blueImp) are Django templates. I treat these templates like the knockout templates in the application. We've encapsulated the jQuery fileupload functionality in a knockout custom binder:

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>

Upvotes: 4

Related Questions