$组件在ko组件内的foreach绑定中不正确

Question

js小提琴显示问题：http：//jsfiddle.net/davetrepeano/58vm9r6g/7/

我有一个自定义组件，可观察到可观察的数组。列表元素已阅读，我正在尝试支持让用户删除元素。

这是模板：

<template id="kv-list">
<input type="text" placeholder="key" data-bind="textInput: k">
<input type="text" placeholder="value" data-bind="textInput: v">
<button data-bind="click: add">Add</button><br>
<table>
    <thead>
        <tr>
            <th data-bind="text: keyHeading"></th>
            <th data-bind="text: valueHeading"></th>
            <th></th>
        </tr>
    </thead>
    <tbody  data-bind="foreach: items">
        <tr>
            <td data-bind="text: k"></td>
            <td data-bind="text: v"></td>
            <td><a href="#" data-bind="click: $component.delete">delete</a></td>
        </tr>
    </tbody>
</table>

以及ViewModel和注册代码：

    功能kv（k，v）{        self = this;        self.k = k;        self.v = v;    }    函数kvpairlist（params）{        this.items = params.items;        this.keyheading = paramsheading ||'钥匙';        this.valueheading = params.valueheading ||'价值';        this.k = ko.observable（）;        this.v = ko.observable（）;    }    kvpairlist.prototype.add = function（）{        this.items.push（new KV（this.k（），this.v（）））;    };    kvpairlist.prototype.delete = function（item）{        this.items.remove（item）;    };    功能VM（params）{        this.title = params && params.heading？参数：'KO组件示例';        this.variants = ko.observablearray（）;    }    ko.components.register（'kvlist'，{        ViewModel：kvpairlist，        模板： {            元素：" KV-List"        }    }）;    ko.components.register（'page-main'，{        ViewModel：VM，        模板：{element：'包装器'}    }）;    ko.applybindings（）;

添加到可观察的阵列中的工作正常。但是，如果单击"行"中的一个错误，则一个错误：

Uncaught TypeError: Cannot read property 'remove' of undefined

看来正在发生的事情是$ component不是组件的ViewModel的上下文，而是foreach绑定中的项目。我尝试了$ parent te s s Lood效果。

有没有办法访问foreach循环内部的组件的视图？

（JS小提琴显示问题：http：//jsfiddle.net/davetropeano/58vm9r6g/7/）

Answer 1

由于某种原因，'this''''''''''''''''''''''''''''''''''''''''''''''''''''

这就是为什么我通常会使用范围的变量来参考实例并防止此关闭问题：

：

尝试以下操作：

function KVPairList(params) {
    var self = this;
    self.add = function(){
         self.items.push(new KV(this.k(), this.v()));   
    };
    self.delete = function(item){
        self.items.remove(item);  
    }
    self.items = params.items;
    self.keyHeading = params.keyHeading || 'Key';
    self.valueHeading = params.valueHeading || 'Value';
    self.k = ko.observable();
    self.v = ko.observable();   
}

，视图模型代码也变得更加独立。

小提琴：

http://jsfiddle.net/luisvsilva/uzs7qhbs/1/