選択があり、選択が変更されたときにプロパティを表示しようとしています (寄付の種類が選択されている場合は、寄付の種類のより長い説明を表示したいと思います)。残念ながら、うまくいきません。ビュー モデルの selectedDonation プロパティのプロパティにアクセスする方法がわかりません。
私がやろうとしていることを説明するのに役立つフィドルがあります。これは実際にプロジェクトに knockout.js を組み込むのは初めての試みなので、初歩的な間違いをお許しください。
私の選択は次のようになります。
<select data-bind="options: availableDonationTypes, optionsCaption: 'Please select...', value: selectedDonation.donationType, optionsText: 'label'"></select>
ここで説明を表示しようとしていますが、三項式は常に false と評価されます。私は何を間違っていますか？
<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);
}
}