如何在 Knockout.js 中嵌套对象

如何解决如何在 Knockout.js 中嵌套对象

在 Knockout.js 中，在数组中嵌套对象的最佳方法是什么？

我正在尝试创建一个按一组课程标题排序的可观察对象，并且在内部将为具有相同组属性（课程代码）的学生提供不同的课程。

这是我的片段

function course(_id,_code,_title,_campus) {
    var self = this;
    this.id = ko.observable(_id);
    this.courseCode = ko.observable(_code);
    this.courseTitle = ko.observable(_title);
    this.coursecampus = ko.observable(_campus);
}

function gpCourseProperties(_code,_isHidden) {
    var self = this;
    this.gpCode = ko.observable(_code);
    this.hide = ko.observable(_isHidden);
    this.courses = ko.observableArray();

    this.addCourse = function (_id,_courseCode,_courseTitle,_courseCampus) {
        self.courses.push(new course(_id,_courseCampus));
    }

    this.switchMutated = function (code) {
        self.hide(!self.hide());
    };
    this.switchText = ko.computed(function () {
        if (self.hide() == true) {
            return '+'
        }
        return '-';
    },this);
}

function viewmodel() {
    var self = this;
    this.gpCourseProp = ko.observableArray();

self.gpCourseProp.push(new gpCourseProperties("MATH1030",true));
self.gpCourseProp.push(new gpCourseProperties("MATH1006",true));
self.gpCourseProp.push(new gpCourseProperties("MATH1046",true));

    for (i = 0; i < self.gpCourseProp().length; i++) {
    if (self.gpCourseProp()[i].gpCode == "MATH1030") {
        self.gpCourseProp()[i].addCourse(new course("1","MATH1030","Calculus","City1"));
        self.gpCourseProp()[i].addCourse(new course("2","City2"));
        self.gpCourseProp()[i].addCourse(new course("3","City3"));
    }
    if (self.gpCourseProp()[i].gpCode == "MATH1006") {
        self.gpCourseProp()[i].addCourse(new course("4","MATH1006","Linear algebra","City1"));
        self.gpCourseProp()[i].addCourse(new course("6","City2"));
    }
    if (self.gpCourseProp()[i].gpCode == "MATH1046") {
        self.gpCourseProp()[i].addCourse(new course("5","MATH1046","discrete Math","City1"));
        self.gpCourseProp()[i].addCourse(new course("7","City2"));
    }
    }
}

var vm = new viewmodel();
ko.applyBindings(vm);

    tr.mutated {
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Course Code</th>
            <th>Course Title</th>
            <th>Course Campus</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: gpCourseProp">
        <tr class="table-dark">
            <td></td>
            <td><span data-bind="text: $data.gpCode"></span></td>
            <td><span></span></td>
            <td></td>
        </tr>
        <!-- ko foreach: $data.courses -->
        <tr data-bind="css: { mutated: $parent.mutated.hide() == true }">
            <td><span data-bind="text: $data.id"></span></td>
            <td><span data-bind="text: $data.courseCode"></span></td>
            <td><span data-bind="text: $data.courseTitle"></span></td>
            <td><span data-bind="text: $data.coursecampus"></span></td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>

我遇到的问题是尝试将课程添加到 gpCourseProperties。

解决方法

主要问题是：

• 当您初始化数据时，您只需将 dictionary = {"merry": "god","christmas": "jul","and": "och","happy": "gott","new": "nytt","year": "ar"} def translate(lst): new_list = [] #create an empty list to start with for i in lst: #to shuffle through every word in the list "lst" i = i.lower() #to make sure we don't mess up the translation because of a upper case letter if i in dictionary.keys(): #look up in the keys new_list.append(dictionary[i]) #we want the value of the key i. else: new_list.append(i) #return i if it does not exist in the dictionary. return new_list # test print(translate(['Merry','christmas','and','happy','new','year','mom'])) 的参数 push 到可观察数组。您需要使用 gpCourseProperties 构建视图模型。
• 为 new 创建 course 内容时，请选中 courseProperties。由于 gpCode === "Some string" 是 gpCode，因此您需要使用 observable 提取其值才能使其始终为真。

这是一个更新版本，只需进行最少的更改即可使其正常工作。 （注意，为了调试目的，我删除了隐藏某些行的 CSS）。

修复已在评论中标记。

()

function course(_id,_code,_title,_campus) {
    var self = this;
    this.id = ko.observable(_id);
    this.courseCode = ko.observable(_code);
    this.courseTitle = ko.observable(_title);
    this.coursecampus = ko.observable(_campus);
}

function gpCourseProperties(_code,_isHidden) {
    var self = this;
    this.gpCode = ko.observable(_code);
    this.hide = ko.observable(_isHidden);
    this.courses = ko.observableArray();

    this.addCourse = function (_id,_courseCode,_courseTitle,_courseCampus) {
        self.courses.push(new course(_id,_courseCampus));
    }

    this.switchMutated = function (code) {
        self.hide(!self.hide());
    };
    this.switchText = ko.computed(function () {
        if (self.hide() == true) {
            return '+'
        }
        return '-';
    },this);
}

function ViewModel() {
    var self = this;
    this.gpCourseProp = ko.observableArray();

    // Fix 1:
    //                     vvvvvvvvvvvvvvvvvvvvvvv                v
    self.gpCourseProp.push(new gpCourseProperties("MATH1030",true));
    self.gpCourseProp.push(new gpCourseProperties("MATH1006",true));
    self.gpCourseProp.push(new gpCourseProperties("MATH1046",true));

    for (i = 0; i < self.gpCourseProp().length; i++) {
        // Fix 2:
        //                               vv
        if (self.gpCourseProp()[i].gpCode() == "MATH1030") {
            self.gpCourseProp()[i].addCourse("1","MATH1030","Calculus","City1");
            self.gpCourseProp()[i].addCourse("2","City2");
            self.gpCourseProp()[i].addCourse("3","City3");
        }
        if (self.gpCourseProp()[i].gpCode() == "MATH1006") {
            self.gpCourseProp()[i].addCourse("4","MATH1006","Linear algebra","City1");
            self.gpCourseProp()[i].addCourse("6","City2");
        }
        if (self.gpCourseProp()[i].gpCode() == "MATH1046") {
            self.gpCourseProp()[i].addCourse("5","MATH1046","Discrete Math","City1");
            self.gpCourseProp()[i].addCourse("7","City2");
        }
    }
}

var vm = new ViewModel();
ko.applyBindings(vm);