淘汰赛选择选项文本 foreach

Question

我有一个对象，它有一个学校列表，其中包含嵌套类和每个类中的嵌套学生

我需要绑定 optionsText 以显示层次结构，以便下拉菜单显示选项，就像：

A校有

学生 1

学生 2

B校有

学生 4

学生 5

学生 6

我可以在下拉列表中获得学校的名称，但我可以通过课堂上的 foreach 获得的学生部分显示为“未定义”，绑定如下。

<select data-bind="options: SchoolList, optionsText: function (item) { return item.School + '|' + item.Classes.forEach(function (item) { return item.Student})}, optionsValue: 'Id', value:SchoolListId, optionsCaption: 'Select'" id="school" name="school" class="school"></select>

任何帮助将不胜感激，

Answer 1

对我来说，听起来您试图通过一个下拉菜单来解决太多问题。也许这更像是一个 UX 问题。另外，据我所知，您不能在 optionsText 绑定中调用这种逻辑（为什么会这样？）。

我认为您需要的是一个两步表单，或者，一个向导。

我会尝试下面的“伪”代码选项 1：

function Student(){
    var self = this;

    //the properties
};

function School(name, students){
    var self = this;

    self.name = ko.observable();
    self.students = ko.observableArray();

    if(name)
        self.name(name);

    if(students)
        self.students(students);
};

function ViewModel(){
    var self = this;

    self.schools = ko.observableArray(
        new School('A', [
            new Student(),
            new Student(),
        ]),
        new School('A', [
            new Student(),
            new Student(),
            new Student(),
        ]),
    );
};

还有标记：

<select data-bind="options: schools, value: selectedSchool, valueAllowUnset: false"></select>

<!-- ko if: students().length > 0 -->
    <select data-bind="options: students, value: selectedStudent, valueAllowUnset: false"></select>
<!-- /ko -->