淘汰赛 foreach 绑定只重复显示第一项

Question

在将 ko observableArray 绑定到表时遇到问题。 [jsFiddle][1]。

http://jsfiddle.net/chetanpawar0989/do6o7wtb/

<tbody data-bind="foreach: $root.TakenCourses"> <tr> <td> <span data-bind="text: courseName"></span></td> <td> <span data-bind="text: courseCredits"></span></td> <td> <button data-bind="click: removeCourse">Remove</button></td> </tr> </tbody>

在 jsFiddle 上它只显示第一项。但是，当我添加课程时，数组的长度正在增加，并且最新的课程被添加到 takeCourses 数组中（可以在警告框中看到）这意味着我在绑定数据时搞砸了一些事情。

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

删除功能也不起作用。

我是 KO 新手，正在学习基础知识。

Answer 1

问题是course对象中没有函数removeCourse。

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

因此应该是

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

---

您可能想稍微重新设计所有内容，可能是这样：

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);
    };
}

http://jsfiddle.net/do6o7wtb/2/