Question

我已经建立了一个viewModel，它可以从文本输入中获取宽度和高度。我想将该宽度和高度传递给文件输入中的data-width和data-height属性。

我正在使用jQuery.fileupload.js来处理文件上传过程。我看到的问题是，在将文件添加到文件输入后，更改文本输入后，数据属性的绑定将不再更新。

html

<input id="file" type="file" data-bind="attr:{'data-height': height, 'data-width': width}" /><br />
<input type="text" data-bind="textInput: width" /><br />
<input type="text" data-bind="textInput: height" />

脚本

var ViewModel = function(width, height) {
  this.width = ko.observable(width);
  this.height = ko.observable(height);
};

ko.applyBindings(new ViewModel(300, 300));

var $file = $('#file');
$file.fileupload({
    add: function(){
    ko.cleanNode($file[0]);
    ko.applyBindings(ViewModel, $file[0]);
  },
  change: function(e, data) {
    ko.cleanNode($file[0]);
    ko.applyBindings(ViewModel, $file[0]);
  }
});

https://jsfiddle.net/jrwdev/1n9ye60z/3/

当输入元素更新时，如何确保绑定保持不变或至少重新绑定到文件输入？

Answer 1

由于jQuery.fileupload.js的{{3}}选项，您看到此现象：

默认情况下，文件输入字段在每次输入后均被克隆替换   输入字段更改事件。
  这对于iframe传输队列是必需的   并允许针对同一文件选择触发更改事件，但是   可以通过将以下选项设置为false来禁用：
  replaceFileInput：true

因此，任何克隆绑定都不会应用（不再）。

下面的示例在上传按钮（作为其工具提示）上具有绑定到视图模型的title属性的width附加绑定，以表明这不仅影响绑定的data-属性。

请注意，在replaceFileInput设置为false的情况下，title在选择文件后仍会更新。

请注意，只有在您的应用程序不需要iframe传输队列的情况下，您才可以应用此功能。

var ViewModel = function(width, height) {
    this.width = ko.observable(width);
    this.height = ko.observable(height);
};

var $file = $('#file');
$file.fileupload({
    replaceFileInput: false
});

ko.applyBindings(new ViewModel(300, 300));

<script src="https://dev4.promotionpod.com/static/scripts/jquery-1.12.4.min.js"></script>
<script src="https://dev4.promotionpod.com/static/internal/uploader/js/vendor/jquery.ui.widget.js"></script>
<script src="https://dev4.promotionpod.com/static/internal/uploader/js/jquery.iframe-transport.js"></script>
<script src="https://dev4.promotionpod.com/static/internal/uploader/js/jquery.fileupload.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<input id="file" type="file" data-bind="attr:{'data-height': height, 'data-width': width, title: width}" /><br />
<input type="text" data-bind="textInput: width" /><br />
<input type="text" data-bind="textInput: height" />

初始化jQuery fileupload后如何重新将敲除js绑定应用于文件输入元素？

1 个答案: