淘汰 arrayForEach 未定义的属性

Question

我在尝试从可淘汰的可观察数组中的每个项目中获取一个数字并将这些数字相加并将其分配给另一个计算变量时遇到了麻烦。这就是我现在所拥有的......

Semesters: ko.observableArray([
    {
        semesterName: "Fall",
        semesterCode: "300",
        PlannedCourses: ko.observableArray([]),
        totalCredits: ko.computed(function(){
            var total = 0;
            ko.utils.arrayForEach(this.PlannedCourses, function (course) {
                total += course.MinHours();
            });

            return total;
        }),
    },
    ...

我正在尝试做的是，在 totalCredits 变量中，我尝试遍历 PlannedCourses 数组并获取每个项目的 MinHours 变量并将它们一起添加到总变量中。然后我将它返回到 Semesters 数组中的 totalCredits 项。我遇到的问题是在 ko.utils.arrayForEach 部分中获取 PlannedCourses 变量。我得到一个未定义的，我不知道为什么。我认为这是一个简单的语法错误，但我看不出有什么问题。

PlannedCourses 可观察数组是一个动态对象，可以正确获取 PlannedCourses 列表。它是在自身的上下文中定义的，但我没有正确地将它传递给 totalCredits 计算函数。

我希望这已经足够清楚了。感谢您的帮助！

注意：所有其余代码都按预期工作。唯一不起作用的部分是 totalCredits 计算函数。我不确定 ko.utils.arrayForEach 中的任何内容是否正常工作，因为我还没有做到这一点。

Answer 1

您将需要更改填充 Semesters 可观察数组的方式以使用构造函数，以便获得对 this 正确范围的引用：

function semester(name, code) {
    this.Name = name;
    this.Code = code;
    this.PlannedCourses = ko.observableArray([]);
    this.totalCredits = ko.computed(function(){
        var total = 0;
        ko.utils.arrayForEach(this.PlannedCourses(), function (course) {
            //Note the change to "this.PlannedCourses()" above to get the underlying array
            total += course.MinHours();
        });

        return total;
    }, this); //now we can pass "this" as the context for the computed
}

看看我们现在如何将一个对象传递给ko.computed 的第二个参数，以用作内部函数中this 的上下文。如需更多信息，请参阅淘汰赛文档：Managing 'this'。

然后在填充数组时创建 semester 的新实例：

Semesters: ko.observableArray([
    new semester("Fall", "300"),
    new semester(...)
]);

这种方法还意味着您有一种一致的方式来创建您的 semester 对象（计算只为一件事定义一次），而不是可能在您最初可能有的任何重复中包含拼写错误等。

Answer 2

正如其他人已经提到的那样，您的this 不是您认为的那样。在您的情况下，上下文应按如下方式传递给计算：

totalCredits: ko.computed(function() {
    // Computation goes here..
}, this)

另一种方法是在对象创建期间将正确的this 存储到某个局部变量（例如var self = this;，然后使用self 而不是this）。

但是，ko.utils.arrayForEach 不适用于可观察数组，但适用于纯 JavaScript 数组，因此您应该打开可观察数组以访问底层数组的元素：

ko.utils.arrayForEach(this.PlannedCourses(), function(course) { 
    // ...
});

// Or

ko.utils.arrayForEach(ko.unwrap(this.PlannedCourses), function(course) { 
    // ... 
});

Answer 3

范围（this）不是你想象的那样。

见http://knockoutjs.com/documentation/computedObservables.html

尝试添加您的上下文，如下所示：

Semesters: ko.observableArray([
{
    semesterName: "Fall",
    semesterCode: "300",
    PlannedCourses: ko.observableArray([]),
    totalCredits: ko.computed(function(){
        var total = 0;
        ko.utils.arrayForEach(this.PlannedCourses, function (course) {
            total += course.MinHours();
        });

        return total;
    }, this), // new context passed in here
},
...

这样做会将数组项本身的上下文传递到您的计算函数中。

编辑： 您可能需要访问循环内的 Semesters 对象，并添加一些方法来引用当前项目：

Semesters: ko.observableArray([
{
    semesterName: "Fall",
    semesterCode: "300",
    PlannedCourses: ko.observableArray([]),
    totalCredits: ko.computed(function(){
        var total = 0;
        for( var i = 0, len = Semesters().length; i < len; i++ ) {
            // check current array item, possibly add an id?
            if( Semesters()[i].semesterName === "Fall" &&
                Semesters()[i].semesterCode === "300" ) {

                ko.utils.arrayForEach(Semesters()[i].PlannedCourses, function (course) {
                   total += course.MinHours();
                });
                break; // done searching
            }
        }

        return total;
    })
},