删除和编辑挖空可观察数组中的项目

Remove and edit items in knockout observableArray

本文关键字：数组 项目 观察 编辑 删除      更新时间：2023-09-26

我在 observableArray workouts 中有一个数组exercises。我想添加从中删除项目的功能。试图使其成为可观察数组：

self.exercises = ko.observableArray();

并添加了删除项目的函数：

self.removeExercise = function() {
        self.exercises.remove(this);
    };

但什么也没发生。虽然相同的函数适用于父数组workouts。除此之外，我还有一个简单的函数来编辑数组中的项目，如下所示：

this.edit = function() { this.editing(true) }

并尝试将其绑定到我的观点中：

<span data-bind="text: name, click: edit"> </span>

但它不起作用。问题可能出在哪里？

这是我的观点

<div class="content">
    <ul data-bind="foreach: workouts">
        <li>
            <span data-bind="text: name, click: edit"> </span>
                 <a href="#" data-bind="click: $parent.removeWorkout">Remove</a>
             <ul data-bind="foreach: exercises">
                 <li>
                     <span data-bind="text: name"> </span>
                     <a href="#" data-bind="click: $parent.removeExercise">remove</a>
                 </li>
             </ul>
        </li>
    </ul>   
</div>

和视图模型：

function AppViewModel() {   
    var self = this;
    self.workouts = ko.observableArray([
    {name: "Workout1", exercises:[
        { name: "Exercise1.1" },
        { name: "Exercise1.2" },
        { name: "Exercise1.3" }
    ]},
]);
    self.exercises = ko.observableArray();
    self.removeWorkout = function() {
        self.workouts.remove(this);
    };
    self.removeExercise = function() {
        self.exercises.remove(this);
    };
    this.editing = ko.observable(false);
    this.edit = function() { this.editing(true) }    
}
ko.applyBindings(new AppViewModel);

下面是一个关于 jsfiddle 的例子：http://jsfiddle.net/c9fQB/

谢谢！

bindingContext 应该为 removeExercise $root，练习应该是一个 observableArray。试试这个： http://jsfiddle.net/Ag8rr/

可观察量代码：

    self.exercises = ko.observableArray([
        { name: "Exercise1.1" },
        { name: "Exercise1.2" },
        { name: "Exercise1.3" }
    ]);    
    self.workouts = ko.observableArray([
    {name: "Workout1", exercises:self.exercises},
]);
相关文章：