Question

JS小提琴显示问题：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和注册码：


    function KV(k, v) {
        self = this;
        self.k = k;
        self.v = v;
    }

    function KVPairList(params) {
        this.items = params.items;
        this.keyHeading = params.keyHeading || 'Key';
        this.valueHeading = params.valueHeading || 'Value';
        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);
    };


    function VM(params) {
        this.title = params && params.heading ? params.heading : 'KO Component Example';
        this.variants = ko.observableArray();
    }


    ko.components.register('kvlist', {
        viewModel: KVPairList,
        template: {
            element: 'kv-list'
        }
    });

    ko.components.register('page-main', {
        viewModel: VM,
        template: { element: 'wrapper' }
    });

    ko.applyBindings();

添加到observable数组工作正常。但是如果你点击其中一行KO上的删除错误：

Uncaught TypeError: Cannot read property 'remove' of undefined

看起来正在发生的事情是$ component不是组件viewmodel的上下文 - 它只是foreach绑定中的项。我尝试了同样效果的$ parent。

有没有办法在foreach循环中访问组件的viewmodel？

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

Answer 1

出于某种原因，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();   
}

View Model代码也变得更加独立。

小提琴：

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

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

1 个答案: