我有一个选择,并试图在选择更改时显示一个属性(选择捐赠类型时,我想显示对捐赠类型的更冗长的描述)。不幸的是,它不起作用。我看不到访问视图模型的 selectedDonation 属性的属性。
我有一个小提琴,应该有助于说明我正在尝试做的事情。这是我第一次将 knockout.js 合并到项目中的实际尝试,所以请原谅初学者的错误。
我的选择如下所示:
<select data-bind="options: availableDonationTypes, optionsCaption: 'Please select...', value: selectedDonation.donationType, optionsText: 'label'"></select>
我试图在这里显示描述,但三元表达式总是计算为假。我究竟做错了什么?
<span data-bind="text: selectedDonation() ? selectedDonation().donationType().description : 'No type selected'"></span>
如果我使用 selectedDonation 而不是 selectedDonation() 作为测试,表达式的计算结果为 true,但我仍然找不到访问所选捐赠类型描述的方法。
我的视图模型和对象:
function Donation(donationType, donationAmount) {
var self = this;
self.donationAmount = donationAmount;
self.donationType = ko.observable(donationType);
self.formattedAmount = ko.computed(function () {
var amount = self.donationAmount;
return amount ? "$" + amount.toFixed(2) : "None";
});
}
function DonationsViewModel() {
var self = this;
self.availableDonationTypes = [{
label: "Donation 1",
description: "This is donation number 1."
}, {
label: "Donation 2",
description: "This is donation number 2."
}];
self.selectedDonation = ko.observable();
self.donations = ko.observableArray([
new Donation(self.availableDonationTypes[0], 50),
new Donation(self.availableDonationTypes[1], 75)]);
self.totalDonation = ko.computed(function () {
var total = 0;
for (var i = 0; i < self.donations().length; i++)
total += self.donations()[i].donationAmount;
return total;
});
self.addDonation = function (form) {
self.donations.push(new Donation(self.selectedDonation.donationType, parseInt(self.selectedDonation.donationAmount)));
}
self.removeDonation = function (donation) {
self.donations.remove(donation);
}
}