1

私は blueimp-jquery-file-upload を smarty で使用しています。blueimp はスクリプトに html タグを持つ奇妙なスクリプト タグを使用しているため、smarty エンジンと競合し、結果としてスクリプトの誤動作が発生しています。

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

アップロードに使用されるスクリプトタグは次のとおりです スクリーンショット

しかし、レンダリングすると正しい順序で表示されません。区切り文字を変更しようとしましたが、それでも機能しません

これがレンダリングされたhtmlです

スクリーンショット

blueimpアップロードスクリプトの代わりに他のJSを配置すると、問題なく動作します。

これでもうまくいかない

{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}
4

1 に答える 1

2

この BlueImp プラグインは、テンプレート エンジンと呼ばれる別の jQuery プラグインを使用して、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;
    }
});

ドキュメントを参照してください。これにより、Smarty 構文を使用せずに HTML を生成できます。

于 2013-02-17T13:18:23.423 に答える