javascript - 绑定(bind)到 foreach 中的单击操作的函数未被调用

Question

我无法将我的点击操作绑定(bind)到 View 模型函数以从数组中删除项目(在 foreach 绑定(bind)中)

我有以下 View 模型

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

    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.FileGroup = ko.observableArray();

    self.FileGroup1 = new FileGroupViewModel();
    self.FileGroup2 = new FileGroupViewModel();
    self.FileGroup3 = new FileGroupViewModel();


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

var viewModel = new ViewModel();

ko.applyBindings(viewModel);

我的 View 基本上列出了 3 个“组”按钮，用户可以在其中选择要上传的文件

下面的一切都按预期工作，除了 $parent.removeFile 没有删除文件:

<div class="row files">
    <h2>Files 1</h2>
    <span class="btn btn-default btn-file">
        Browse  <input data-bind="event: {change: FileGroup1.fileUpload}" type="file" />
    </span>

    <br />
    <div class="fileList" data-bind="foreach: FileGroup1.files">
        <span data-bind="text: name"></span>
        <a href="#" data-bind="click: $parent.removeFile">Remove</a>
        <br />
    </div>
</div>

fiddle https://jsfiddle.net/alexjamesbrown/aw0798p7/

我做错了吗 $parent.removeFile - 似乎这不会在点击时被调用？

这是一个简化的工作示例，不是成品!

Answer 1

你误解了 $parent。它带你离开一个上下文级别。您的 foreach 使用 FileGroup1.files 作为其索引，因此您可能认为 $parent 级别将是 Filegroup1 ，但事实并非如此。它是顶级 View 模型，因为它是 foreach 之外的上下文。

所以你的click绑定(bind)应该是

click: $parent.FileGroup1.removeFile