Question

我无法将点击操作绑定到视图模型函数以从数组中删除项目（在foreach绑定内部）

我有以下视图模型

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

我的观点，基本上列出了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>

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

处小提琴

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

这是一个减少工作的例子，而不是成品！

Answer 1

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

所以你的click绑定应该是

click: $parent.FileGroup1.removeFile

绑定到foreach中未单击操作的函数未被调用

1 个答案: