我的视图模型不反映我的选择
My viewmodel does not reflect my selections
我在列表中使用级联下拉菜单。
用户界面工作正常,但底层视图模型未根据用户选择进行更新。
我有以下 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"}
]
这可能是一个数据绑定问题,但我不知道从哪里开始调试这种问题。
请注意,我在 bootstrap 网格中使用此代码。
感谢任何帮助。
提前致谢。
问题是您在 selectedExam
构造函数中缺少 self
的定义。目前,您的 self
实际上引用了 window
(全局上下文)因此您 ending-up 返回了空对象。
试试这个:
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;
});
}
我在列表中使用级联下拉菜单。 用户界面工作正常,但底层视图模型未根据用户选择进行更新。
我有以下 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"}
]
这可能是一个数据绑定问题,但我不知道从哪里开始调试这种问题。
请注意,我在 bootstrap 网格中使用此代码。
感谢任何帮助。 提前致谢。
问题是您在 selectedExam
构造函数中缺少 self
的定义。目前,您的 self
实际上引用了 window
(全局上下文)因此您 ending-up 返回了空对象。
试试这个:
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;
});
}