HTML 5 FileList - jsRender
HTML 5 FileList - jsRender
使用新的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>
但是,它没有按预期工作。为了演示,如果您尝试使用注释掉的行渲染模板,那么它可以正常工作。
如果有人能告诉我我做错了什么,我将不胜感激。谢谢
似乎模板
引擎仅适用于真实数组,不适用于 FileList
我在这里修复了它 http://jsfiddle.net/4m3YQ/5/
像这样转换为数组:
[].slice.call(this.files)
相关文章:
- 访问jsrender模板中的全局javascript变量并更新它
- 如何在jsrender中检查数组null或为空
- jsRender,带空格的json列名
- jsrender是否可以动态地呈现字段名
- JSrender- 从复杂结构访问元素
- 将 jsViews/jsRender 与重新调整为字典条目的属性一起使用
- 预填充jsrender模板
- 使用jsRender,如何使用有序位置以外的东西从数组中提取特定项
- JSRender模板自定义标记用法
- JsRender:如何将变量传递到嵌套模板中
- JsRender:使用 if 语句将 JSON 对象中的值与外部变量进行比较
- 使用 JSrender将 DOM 级别 JS 对象传递给模板函数
- HTML 5 FileList - jsRender
- Angular2 VS Jquery、JsRender 和 JSView 的组合
- 在 jsrender 中选择数组的一部分
- 尝试使用 jsrender在 for 循环中的数组上运行函数
- 如何在 jsRender 模板中迭代 JSON 数组
- JSrender未在模板中显示函数返回
- JSRender 条件语句
- JSrender使用已选择的选项填充多个选择框