javascript - 将 div 行绑定(bind)到 observableArray 中的单个项目

Question

我正在开发一个由 3 部分组成的上传表单，用户可以在其中上传 3 组文件

到目前为止，我已经得到了以下 viewModel

var FileGroupViewModel = function (id) {
    var self = this;

    self.id = ko.observable(id);
    self.files = ko.observableArray();

    self.removeFile = function (item) {
        self.files.remove(item);
    }

    self.fileUpload = function (data, e) {
        var file = e.target.files[0];

        self.files.push(file);
    };
}

var ViewModel = function () {
    var self = this;

    self.fileGroups = ko.observableArray();

    self.getFileGroupById = function (id) {
        ko.utils.arrayFilter(self.fileGroups(), function (item) {
            return item.id == id;
        });
    };

    self.uploadFiles = function () {
        alert('Uploading');
    }
}

var viewModel = new ViewModel();
viewModel.fileGroups.push(new FileGroupViewModel(1));
viewModel.fileGroups.push(new FileGroupViewModel(2));
viewModel.fileGroups.push(new FileGroupViewModel(3));

ko.applyBindings(viewModel);

我有 3 个用户可以上传到的文件“组”。(我稍后会做实际的上传功能)

我正在努力解决如何将我的行绑定(bind)到数组的特定项目？也许我不应该使用可观察数组？

<div class="row files" id="files1" data-bind="???">
   <h2>Files 1</h2>
   <span class="btn btn-default btn-file">
   Browse  <input data-bind="event: {change: fileUpload}" type="file"  />
   </span>
   <br />
   <div class="fileList" data-bind="foreach: files"> <span data-bind="text: name"></span>
      <a href="#" data-bind="click: removeFile">Remove</a>
   </div>
</div>

这个想法是当用户选择文件时，它们会出现在按钮下的列表中:

..带有用于从上传队列中删除文件的链接。

我在这里设置了一个 fiddle - https://jsfiddle.net/alexjamesbrown/c9fvzjte/

Answer 1

要使您的代码在文件 0、1、2 中独立工作，需要进行一些重要的修改

主题演讲

event: { change: function(){fileUpload($data,$element.files[0])}} here we are passing our selected file i.e filedata using $element in change event not in usual click event . Filedata will have complete file information .

查看:

<div class="row files" id="files1" data-bind="foreach:fileGroups">
   <h2>Files 0</h2>
<span class="btn btn-default btn-file">
   Browse  <input  data-bind="event: { change: function() { fileUpload($data,$element.files[0]) } }" type="file"  />
</span>
<div class="fileList" data-bind="foreach: files"> <span data-bind="text: name"></span>
 <a href="#" data-bind="click: removeFile.bind($data,$parent)">Remove</a>
</div>

View 模型:

var SubFunction = function (data) {
    var self = this;
    self.name = data.name;
    self.removeFile = function (item1) {
        item1.files.remove(this); //current reference data & item1 has parent reference data
    }
}
var FileGroupViewModel = function (id) {
    var self = this;
    self.id = ko.observable(id);
    self.files = ko.observableArray([new SubFunction({
        'name': 'Test'
    })]);
    self.fileUpload = function (item1, item2) {
        self.files.push(new SubFunction(item2));
    };
}

var ViewModel = function () {
    var self = this;
    self.fileGroups = ko.observableArray();
    self.getFileGroupById = function (id) {
        ko.utils.arrayFilter(self.fileGroups(), function (item) {
            return item.id == id;
        });
    };
    self.uploadFiles = function () {
        alert('Uploading');
    }
}

var viewModel = new ViewModel();
viewModel.fileGroups.push(new FileGroupViewModel(1));
ko.applyBindings(viewModel);

工作样本可供抢购 here

工作示例(如果您计划 reuse your Html