0

我有一个选择,并试图在选择更改时显示一个属性(选择捐赠类型时,我想显示对捐赠类型的更冗长的描述)。不幸的是,它不起作用。我看不到访问视图模型的 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);
    }
}
4

1 回答 1

1

你的问题是selectedDonation一开始什么都没有。您不能将下拉列表的值绑定到dontationTypee property of nothing: it doesn't have such a property.selectedDonation needs to be aDonation` 对象。

这是使用该方法的最终小提琴:http: //jsfiddle.net/xUn9N/3/

于 2013-07-09T21:35:30.573 回答