我的视图模型不反映我的选择答案

【问题标题】：My viewmodel does not reflect my selections我的视图模型不反映我的选择
【发布时间】：2016-01-05 12:51:05
【问题描述】：

我在列表中使用级联下拉菜单。用户界面工作正常，但底层视图模型没有与用户选择保持同步。

我有以下 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"}
]

这可能是数据绑定问题，但我不知道从哪里开始调试这种问题。

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

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

【问题讨论】：

标签： javascript knockout.js data-binding cascadingdropdown

【解决方案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;
    });
}

【讨论】：