«Не удалось найти контейнер списка файлов в шаблоне» error

Question

Я получаю сообщение «Не удалось найти контейнер списка файлов в шаблоне», появляющийся в моей консоли отладки Javascript при использовании прекрасного загрузчика.

Ниже приведен пример jsfiddle проблемы. http://jsfiddle.net/Lu82ba9L/1/

код из примера повторяется здесь

<!-- using fine uploader 5.1.3 at http://keysymmetrics.com/jsfiddle/jquery.fine-uploader.js --> 
$(document).ready(function() { 
    $("#fine-uploader").fineUploader({ 
     debug: true, 
     template: 'qq-template-bootstrap', 
     request: { 
      endpoint: "/my-endpoint" 
     } 
    }); 
}); 

<script type="text/template" id="qq-template-bootstrap" class="qq-uploader-selector"> 
    <div class="row"> 
     <div class="col-sm-4" > 
      <div class="qq-upload-button-selector qq-upload-drop-area-selector drag-drop-area"> 
       <div>Drag and drop files here or click to upload</div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-4" > 
      <div class="qq-upload-list-selector" > 
       <div class="panel panel-default" > 
        <div class="panel-body" > 
         <div class="qq-progress-bar-container-selector progress"> 
          <div class="qq-progress-bar-selector progress-bar"></div> 
         </div> 
         <span class="qq-upload-spinner-selector qq-upload-spinner"></span> 
         <span class="qq-upload-file-selector qq-upload-file"></span> 
         <span class="qq-upload-size-selector qq-upload-size"></span> 
         <span class="qq-upload-status-text-selector qq-upload-status-text"></span> 
         <img class="qq-thumbnail-selector" qq-max-size="100" /> 
        </div><!-- close panel-body --> 
       </div><!-- close panel --> 
      </div> 
     </div> 
    </div>  
</script> 


<h1>Fine Uploader Test</h1> 
<div id="fine-uploader"></div> 

Просто для получения дополнительной информации, которая может оказаться полезной, у меня есть рабочая версия здесь. http://jsfiddle.net/61motjed/2/. В этой версии здесь я переместил элемент «div.qq-upload-list-selector» в другую позицию в DOM (однако это не структура DOM, которую я хочу). Мне также непонятно, почему первый пример терпит неудачу, но второй пример работает.

Answer 1

Ваш шаблон недействителен. Шаблон должен содержать элемент верхнего уровня с классом CSS «qq-uploader-selector». Этот элемент должен содержать все другие элементы в вашем шаблоне. Простое обертывание содержимого вашего шаблона в элементе с этим классом должно исправить вашу проблему.