新しい HTML 5 ファイル API を使用して、ユーザーが選択したファイルをテンプレート (jsRender でレンダリング) に渡そうとしています。HTMLは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
<script>
$(function() {
$(':file').change(function() {
//$('#files-placeholder').html($('#files-template').render({ files: [ { name: 'Test 1' }, { name: 'Test 2' } ] }));
$('#files-placeholder').html($('#files-template').render({ files: this.files }));
});
});
</script>
</head>
<body>
<form>
<input name="files" type="file" multiple="multiple" />
<script id="files-template" type="text/x-jsrender">
<ul>
{{for files}}
<li>{{>name}}</li>
{{/for}}
</ul>
</script>
<div id="files-placeholder"></div>
</form>
</body>
</html>
ただし、期待どおりには機能しません。デモ用に、コメント アウトされた行を使用してテンプレートをレンダリングすると、正常に動作します。
誰かが私が間違っていることを教えてくれれば幸いです。ありがとう