Как повторно применить нокаутированные привязки js к элементу ввода файла после инициализации загрузки файла jQuery?

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" />

scripts

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

Вы видите это поведение из-за опции replaceFileInput jQuery.fileupload.js:

По умолчанию поле ввода файла заменяется наклон после каждого события изменения поля ввода.
Это требуется для транспортных очередей iframe и позволяет запускать события изменения для того же выбора файла, но его можно отключить, установив для следующего параметра значение false:
replaceFileInput: true

Из-за этого любые привязки нокаута не применяются (больше) к этому клону.

В приведенном ниже примере есть дополнительная привязка title, привязанная к свойству width viewmodel на кнопке загрузки (являющаяся его всплывающей подсказкой), чтобы показать, что это влияет не только на связанные атрибуты 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" />