单击不适用于可观察数组元素

Question

我是 knockout 的新手，正在尝试构建一个简单的应用程序，我可以在其中动态添加数据行，但我不明白为什么 data-bind="click: remove" in remove button 在我删除 data-bind="click: remove" from remove button 我的应用程序时不起作用会正常工作，

如何使用删除按钮删除动态元素？

function people(name) {
    return {
        name: ko.observable(name),
        remove: function () {
            viewModal.peoples.remove(this);
        }
    };
}
var viewModal = {
    self: this,
    firstName: ko.observable(),
    peoples: ko.observableArray([
        { name: 'Franklin' },
        { name: 'Mario' },

    ]),
    addMore: function () {
        this.peoples.push(new people(this.firstName()));
    }
};
ko.applyBindings(viewModal);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <input type="text" data-bind="value:firstName" />
            </div>
            <div class="col-md-2">

            </div>
        </div>

        <input type="button" value="Add People" data-bind="click:addMore" />
    </div>
    <div class="col-md-12" data-bind="foreach: peoples">
        <div class="row">
            <div class="col-md-6 form-group">
                <label data-bind="text:name"></label>
                <input class="form-control" type="text" />
            </div>
            <div class="col-md-6 form-group">
                <input type="button" class="btn btn-primary" value="remove" data-bind="click: remove" />
            </div>
        </div>
    </div>

</div>

Answer 1

编辑：正如 @GKB 在评论中指出的那样，主要错误是最初的 people 对象缺少 remove 方法，结果我在没有真正指出这一点的情况下一路修复在我的回答中...

原回答：

您不能像您尝试的那样使用 this。

要么使用普通对象，要么使用 new class 个实例：

工作示例：

// Example 1: using plain objects
function Person(name, app) {
  const self = {
    name: ko.observable(name),
    remove: () => app.people.remove(self)
  };
  
  return self;
}

// Example 2: using `new`
var App = function() {
  const self = this;
    
  this.firstName = ko.observable(),
  this.people = ko.observableArray(
    [ "Franklin", "Mario" ].map(
      name => Person(name, self)
    )
  );
};

App.prototype.addPerson = function() {
  this.people.push(Person(this.firstName(), this));
  this.firstName("");
};

ko.applyBindings(new App());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <input type="text" data-bind="value: firstName" />
            </div>
            <div class="col-md-2">

            </div>
        </div>

        <input type="button" value="Add People" data-bind="click: addPerson" />
    </div>
    <div class="col-md-12" data-bind="foreach: people">
        <div class="row">
            <div class="col-md-6 form-group">
                <label data-bind="text:name"></label>
                <input class="form-control" type="text" data-bind="textInput: name" />
            </div>
            <div class="col-md-6 form-group">
                <input type="button" class="btn btn-primary" value="remove" data-bind="click: remove" />
            </div>
        </div>
    </div>

</div>

单击不适用于可观察数组元素

click not working for observable array element

javascript

jquery

knockout.js