Smarty与脚本中的html标签爆裂

Question

我正在使用smarty的blueimp-jquery-file-upload，并且blueimp使用脚本中具有html标签的奇怪脚本标签，并且它与smarty引擎发生冲突，因此我脚本发生故障。

<script id="template-upload" type="text/x-tmpl"> 

下面是用于上传

但是，当它呈现，它不按照正确的顺序来script标签，我试图改变定界符但它仍然不工作

这里呈现的HTML

请谁能告诉我豪我可以修复它，当我把一些其他的JS，而不是blueimp上传脚本，它工作正常。

即使这不工作

{literal} 
<script id="template-upload" type="text/x-tmpl"> 
var a = 3; 
<div class="B">sdfsdfs</div> 
var j = 5; 
<div class="A"></div> 
</script> 
{/literal} 

Answer 1

这BlueImp插件使用另一个jQuery插件称为Templates engine从JavaScript生成HTML。他们恰巧使用了与Smarty相同的语法，这似乎正在破坏你的代码。但是，BlueImp插件允许您通过手动将HTML定义为插件选项来覆盖此模板语言。你的JavaScript看起来是这样的：

$('#fileupload').fileupload({ 
    filesContainer: $('#upload_files_container'), 
    uploadTemplateId: null, 
    downloadTemplateId: null, 
    uploadTemplate: function (o) { 
     var rows = $(); 
     $.each(o.files, function (index, file) { 
      var row = $('<tr class="template-upload fade">' + 
       '<td class="preview"><span class="fade"></span></td>' + 
       '<td class="name"></td>' + 
       '<td class="size"></td>' + 
       (file.error ? '<td class="error" colspan="2"></td>' : 
         '<td><div class="progress">' + 
          '<div class="bar" style="width:0%;"></div></div></td>' + 
          '<td class="start"><button>Start</button></td>' 
       ) + '<td class="cancel"><button>Cancel</button></td></tr>'); 
      row.find('.name').text(file.name); 
      row.find('.size').text(o.formatFileSize(file.size)); 
      if (file.error) { 
       row.find('.error').text(
        locale.fileupload.errors[file.error] || file.error 
       ); 
      } 
      rows = rows.add(row); 
     }); 
     return rows; 
    }, 
    downloadTemplate: function (o) { 
     var rows = $(); 
     $.each(o.files, function (index, file) { 
      var row = $('<tr class="template-download fade">' + 
       (file.error ? '<td></td><td class="name"></td>' + 
        '<td class="size"></td><td class="error" colspan="2"></td>' : 
         '<td class="preview"></td>' + 
          '<td class="name"><a></a></td>' + 
          '<td class="size"></td><td colspan="2"></td>' 
       ) + '<td class="delete"><button>Delete</button> ' + 
        '<input type="checkbox" name="delete" value="1"></td></tr>'); 
      row.find('.size').text(o.formatFileSize(file.size)); 
      if (file.error) { 
       row.find('.name').text(file.name); 
       row.find('.error').text(
        locale.fileupload.errors[file.error] || file.error 
       ); 
      } else { 
       row.find('.name a').text(file.name); 
       if (file.thumbnail_url) { 
        row.find('.preview').append('<a><img></a>') 
         .find('img').prop('src', file.thumbnail_url); 
        row.find('a').prop('rel', 'gallery'); 
       } 
       row.find('a').prop('href', file.url); 
       row.find('.delete button') 
        .attr('data-type', file.delete_type) 
        .attr('data-url', file.delete_url); 
      } 
      rows = rows.add(row); 
     }); 
     return rows; 
    } 
}); 

See their documentation。这将允许您在不使用Smarty语法的情况下生成HTML。