将div行绑定到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);

我有三个‘组’的文件，用户可以上传到。(稍后我将执行实际的上载功能)

如何将行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>

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

​

​

..with从上传队列中删除文件的链接。

我在这里放了把小提琴- https://jsfiddle.net/alexjamesbrown/c9fvzjte/

Answer 1

要使代码在0、1、2文件中运行independently，所需的重要修改不多。

KeyNote

event: { change: function(){fileUpload($data,$element.files[0])}}在这里，我们传递我们所选的文件，即使用$element在change事件中使用$element，而不是在通常的单击事件中。文件数据将有完整的文件信息。

视图：

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

viewModel:

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);

用于抓取这里的工作样本

如果您计划使用重用Html，请使用示例