knockout.js - 如何使用 knockout 绑定(bind)访问文件输入？

Question

给定以下代码:

<input data-bind="event: { change: uploadImage(this.files[0]) }" style="width: 10px;" type="file">

我收到一条错误消息，提示“未定义文件”。我正在尝试转换此演示:

https://github.com/paulrouget/miniuploader/blob/gh-pages/index.html

对 knockout 友好的实现。当我加载页面时发生错误。如果用户指定了文件，我知道如何访问该文件吗？

jsfiddle : http://jsfiddle.net/LkqTU/9597/

Answer 1

你有两个问题:

如果您只是在对象字面量中编写函数调用(uploadImage(this.files[0]))，它将被执行 一次当对象字面量被初始化时，当 KO 解析绑定(bind)时。因此它将使用错误的参数执行一次，并且您更改事件将不起作用。您可以通过将其包装到匿名函数中来使其工作。参见文档 Accessing the event object, or passing more parameters section.

this没有引用您需要使用的绑定(bind)中的当前元素 $element instead.

所以正确的绑定(bind)看起来像这样:

data-bind="event: { change: function() { uploadImage($element.files[0]) } }"

演示 JSFiddle .