剔除不将数组的索引值传递给视图模型
剔除不将数组的索引值传递给视图模型
提问于 2018-12-07 13:24:14
在我的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数组的索引。
Stack Overflow用户
回答已采纳
发布于 2018-12-07 14:31:09
这是因为您的foreach中的所有foreach都有相同的id="upload"。当您单击任何按钮时，它总是会触发第一个input。所以每次都是零。因此，使用id绑定根据index()更改输入的attr。现在，inputs将具有ids "upload0“、"upload1”等。您还需要更改click绑定以触发相应的ids：
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 -->
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53670504
复制相关文章
相似问题
腾讯云开发者
