Knockout.js 每个绑定的敲除只重复显示第一项

将ko-Array绑定到表时遇到问题。 [jsFiddle][1]

去除

在JSFIDLE上，它只是显示第一项。然而，当我添加课程时，数组的长度在增加，最新的课程被添加到takenCourses数组中（可以在警报框中看到），这意味着我在绑定数据时出错了

另外，当我在我的网页中运行相同的代码时，它会在我添加课程时重复显示第一个课程

删除功能也不起作用

---

我不熟悉KO并学习基础知识。

问题是

课程

对象中没有函数

removeCourse

<button data-bind="click: removeCourse">Remove</button>

我建议不要维护已选和未选课程的列表，而是将其作为每门课程的属性。在视图模型中，您将使用动态列表：

function NCSUCourseModel() 
{
    var self = this;

    //Static list of available courses
    self.courses = ko.observableArray([
        new course("Orientation", 1, true),
        new course("Operating Sytems", 3),
        new course("Algorithms", 3),
        // ...
    ]);

    self.selectedCourse = ko.observable();

    self.AvailableCourses = ko.computed(function() {
        return ko.utils.arrayFilter(self.courses(), function(item) {
            return item.selected() == false;
        });
    });

    self.TakenCourses = ko.computed(function() {
        return ko.utils.arrayFilter(self.courses(), function(item) {
            return item.selected() == true;
        });
    });

    self.AddCourse = function() {
        this.selectedCourse().selected(true);
    };
}

---

谢谢你，尼科。新方法很好，但只是想知道旧方法有什么问题。根据您之前的评论，我尝试将

删除
，但仍然不起作用。您最初的JSFIDLE混合使用了
这个
和
自我
。
removeCourse
函数中的
this
的值将不会引用NCSUCourseModel实例，但knockout将重新作用域到课程实例。您应该在foreach绑定中使用
$parent
，而不是
$root
，来引用包含数组的viewmodel实例。除了简单化的viewModel之外，任何其他视图中的
$root
都是正确的实例。
var course = function(name, credits, selected) {
    var self = this;

    this.courseName = name;
    this.courseCredits = credits;
    this.selected = ko.observable(!!selected);

    this.unselectCourse = function() {
        self.selected(false);
    };
};

function NCSUCourseModel() 
{
    var self = this;

    //Static list of available courses
    self.courses = ko.observableArray([
        new course("Orientation", 1, true),
        new course("Operating Sytems", 3),
        new course("Algorithms", 3),
        // ...
    ]);

    self.selectedCourse = ko.observable();

    self.AvailableCourses = ko.computed(function() {
        return ko.utils.arrayFilter(self.courses(), function(item) {
            return item.selected() == false;
        });
    });

    self.TakenCourses = ko.computed(function() {
        return ko.utils.arrayFilter(self.courses(), function(item) {
            return item.selected() == true;
        });
    });

    self.AddCourse = function() {
        this.selectedCourse().selected(true);
    };
}