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它只显示第一项。然而，当我添加课程时，数组的长度正在增加，并且最新课程将被添加到takenCourses数组中（可以在警告框中看到）这意味着我在绑定数据时搞错了。

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

删除功能也不起作用。

我是KO的新手并且学习基础知识。

Answer 1

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

<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/

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

1 个答案: