javascript - 我的 View 模型不反射(reflect)我的选择

Question

我在列表中使用级联下拉。 用户界面工作正常，但底层 View 模型与用户选择不同步。

我有以下 html :

<ul data-bind="foreach: selectedExams">
 <li>
  <select data-bind="options: $parent.availableExams, optionsCaption: 'Choisir un type...', optionsText: 'examTypeName', value: examtype"></select>
  <select data-bind="options: exams, optionsCaption: 'Choisir un examen...' , optionsText: 'examName',value: exam, enable:exams().length"></select>
  <a href="#" data-bind="click: $parent.remove">Remove</a>
 </li>
</ul>
<button data-bind="click: add">Add</button>
<pre data-bind="text: ko.toJSON($root.selectedExams, null, 2)"></pre>

js文件:

function AppViewModel() {
    var self = this;

    self.availableExams = [
            {
                examTypeId: "SCAN", examTypeName: "Scanner", exams: [
                  { examId: "SCOEUR", examName: "SCOEUR" },
                  { examId: "SANGIO", examName: "SANGIO abdominopelvien" },
                  { examId: "SSINUS", examName: "SSINUS sans inj" }
                ]
            },
            {
                examTypeId: "RX", examTypeName: "Radio", exams: [
                    { examId: "RBRAS", examName: "RBRAS" },
                    { examId: "RAVBRAS", examName: "RAVBRAS" },
                    { examId: "RBASSIN", examName: "RBASSIN 1 inc + rx bilat COXO FEMO 1/2 inc" }
                ]
            },
            {
                examTypeId: "IRM", examTypeName: "IRM", exams: [
                    { examId: "ITETE", examTypeId: "IRM", examName: "ITETE angio IRM enceph" },
                    { examId: "IRACHIS", examTypeId: "IRM", examName: "IRACHIS 1/2 segt avec INJ" },
                    { examId: "ITHORAX", examTypeId: "IRM", examName: "ITHORAX sans inj" }
                ]
            }
    ];

    self.selectedExams = ko.observableArray([new selectedExam()]);
    self.add = function () {
        self.selectedExams.push(new selectedExam());
    };
    self.remove = function (exam) { self.selectedExams.remove(exam) }
}


var selectedExam = function () {
    self.examtype = ko.observable(undefined);
    self.exam = ko.observable(undefined);
    self.exams = ko.computed(function () {
        if (self.examtype() == undefined || self.examtype().exams == undefined)
            return [];
        return self.examtype().exams;
    });
}

ko.applyBindings(new AppViewModel());

3 行不同选择的结果如下:

[
  {},
  {},
  {}
]

我期待看到这个例子:

[
  {"SCAN","SCOEUR"},
  {"RX", "RBRAS"},
  {"IRM", "ITETE"}
]

这可能是一个数据绑定(bind)问题，但我不知道从哪里开始调试此类问题。

请注意，我在引导网格中使用此代码。

任何帮助表示赞赏。 提前致谢。

Answer 1

问题是您在 selectedExam 构造函数中缺少 self 的定义。目前，您的 self 实际上引用了 window (全局上下文)，因此您最终会返回空对象。

试试这个:

var selectedExam = function () {
    var self = this; // <-- add this

    self.examtype = ko.observable(undefined);
    self.exam = ko.observable(undefined);
    self.exams = ko.computed(function () {
        if (self.examtype() == undefined || self.examtype().exams == undefined)
            return [];
        return self.examtype().exams;
    });
}