Question

我的foreach绑定中有一个按钮

<button class="Button" type="button" data-bind="text: $root.UploadFile, 
 event: { click: function (data, e) {e.preventDefault(); $('#upload').click();}}"></button>

当我单击按钮时，我会拨打以下电话

<input id="upload" type="file" style="width: 100%; display: none" 
   data-bind="event: { change: function(a,b){ $root.FileChanged($index,a,b)}  }" />

在视图模型中，我具有此功能

private FileChanged = (index,vm, evt) => {

}

但是，当调用函数时，数组的索引始终为“ 0”。我正在尝试通过执行foreach来获取$index数组的索引。

Answer 1

这是因为input中的所有foreach都具有相同的id="upload"。单击任何按钮时，它将始终触发第一个input。这就是为什么您每次都会归零的原因。因此，使用attr绑定基于id更改输入的index()。现在input的ID将为“ upload0 ”，“ upload1 ”等。您还需要更改click绑定以触发相应的ID：

const viewModel = function() {
    const self = this;

    self.array = ko.observableArray([0, 1]);
    self.FileChanged = (index) => {
        alert(index);
    }
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!-- ko foreach: array -->
<button type="button" data-bind="event: { click: function (data, e) {e.preventDefault(); $('#upload' + $index()).click();}}">Upload</button>
<input type="file" style="width: 100%; display: none" data-bind="attr: {id:'upload' +$index() }, event: { change: function(a,b){$root.FileChanged($index(),a,b)}  }" />
<!-- /ko -->

淘汰赛未将数组的索引值传递给视图模型

1 个答案: