Fine Uploader-Code für Multi-Instanz wiederverwenden

Question

Ich habe mehrere Instanzen von Fine Uploader in einer Seite. Ich möchte das Uploader-Skript und die Vorlage für jede Uploader-Instanz nicht wiederholen/duplizieren, da es in meinem Fall viel Code ist (6-8 Uploader).

Ich habe folgende:

$('#fine-uploader-manual-trigger-section1').fineUploaderS3({ 
    template: 'qq-template-manual-trigger-section1', 
    autoUpload: false, 
    debug: true, 
    request: { 
     endpoint: $("#s3_url").val(), 
     accessKey: $("#access_key").val(),  
    }, 
}); 
$('#fine-uploader-manual-trigger-section2').fineUploaderS3({ 
    template: 'qq-template-manual-trigger-section2', 
    autoUpload: false, 
    debug: true, 
    request: { 
     endpoint: $("#s3_url").val(), 
     accessKey: $("#access_key").val(),  
    }, 
}); 
....... 
up to 6-8; as you can template code also repeat. 

Meine Ziele sind es wieder zu verwenden Skript und möglicherweise Vorlage unter Ansatz. Ich brauche einen Rat oder eine Richtung, was eine Lösung sein könnte. Sicherlich versuche ich Code Duplikation zu vermeiden.

$('#fine-uploader-manual-trigger-section1').createUploader('section1'); 
$('#fine-uploader-manual-trigger-section2').createUploader('section2'); 

function createUploader(section) { 
    return new fineUploaderS3({ 
    template: 'qq-template-manual-trigger'+section, 
    autoUpload: false, 
    debug: true, 
    request: { 
     endpoint: $("#s3_url").val(), 
     accessKey: $("#access_key").val(),  
    }, 
    }); 
} 

Meine Frage, wie .fineUploaderS3 zu instanziiert und befestigen das zu $('#fine-uploader-manual-trigger-section1')? Ist obige Vorgehensweise mit der JQuery-Version möglich?

Answer 1

Hier ist eine Funktion, die Sie einzigartige Elemente w/unterschiedlichen Endpunkten und Vorlagen angebracht, um eine Reihe von Fein Uploader S3 Instanzen erstellen anrufen:

function createUploader(uploaderInfo) { 
    return new qq.s3.FineUploader({ 
     element: document.querySelector(uploaderInfo.elementSelector), 
     template: document.querySelector(uploaderInfo.templateSelector), 
     request: { 
     endpoint: uploaderInfo.endpoint 
     } 
    }) 
} 

... und Sie können wie folgt diese Funktion aufrufen :

[ 
    { 
     elementSelector: '#element1', 
     templateSelector: '#template1', 
     endpoint: 'endpoint/1' 
    }, 
    { 
     elementSelector: '#element2', 
     templateSelector: '#template2', 
     endpoint: 'endpoint/2' 
    } 
    ... 
].forEach(function(uploaderInfo) { 
    createUploader(uploaderInfo) 
}) 

Das ist die allgemeine Idee. Sie können den Code natürlich so ändern, dass er Ihren Anforderungen besser entspricht. Wenn Sie Uploader-Instanzen verfolgen müssen, können Sie dies auch innerhalb der forEach-Schleife tun.