Question

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

我有以下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 file：

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"}
]

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

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

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

Answer 1

问题是您在self构造函数中缺少selectedExam的定义。目前，您的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;
    });
}

我的viewmodel并不反映我的选择

1 个答案: