1

JS Fiddle 显示问题：http: //jsfiddle.net/davetropeano/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) {
        自我=这个；
        自我.k = k;
        自我.v = v;
    }

    功能 KVPairList（参数）{
        this.items = params.items;
        this.keyHeading = params.keyHeading || '钥匙';
        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 = 功能（项目）{
        this.items.remove(item);
    };


    功能虚拟机（参数）{
        this.title = params && params.heading ? params.heading : 'KO 组件示例';
        this.variants = ko.observableArray();
    }


    ko.components.register('kvlist', {
        视图模型：KVPairList，
        模板： {
            元素：'kv 列表'
        }
    });

    ko.components.register('page-main', {
        视图模型：VM，
        模板：{元素：'包装器'}
    });

    ko.applyBindings();

添加到可观察数组工作正常。但是，如果您在其中一行上单击删除，则会出现错误：

Uncaught TypeError: Cannot read property 'remove' of undefined

看起来正在发生的事情是 $component 不是组件视图模型的上下文 - 它只是 foreach 绑定中的项目。我尝试了 $parent 具有相同的效果。

有没有办法在 foreach 循环中访问组件的视图模型？

（JS Fiddle 显示问题：http: //jsfiddle.net/davetropeano/58vm9r6g/7/）

4

1 回答 1

0

出于某种原因，remove 方法中的“this”不是指 KVPairList。

这就是为什么我通常建议使用作用域变量来引用实例并防止这种关闭问题：

试试这个：

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/

于 2015-05-12T04:42:49.620 回答