1

我一直在处理一个简单的列表，例如learn.knockoutjs.com上的教程“使用列表和集合”。我想要一个列表样式的应用程序，用户可以在其中选择捐赠类型并输入金额，然后将捐赠添加到列表中。

本教程通过在单击按钮时添加输入来工作；我正在努力解决如何使用固定输入来连续添加文本值。

UI 看起来像这样，假设已经进行了两次捐赠，并且选择以三种捐赠类型 1、2 和 3 开始：

Donation Type:  [select: Donation 3]
Amount: [text: $100.00]

[button: Add Donation]

Donations:

Type         Amount
-------------------------------
Donation 1   $10.00    [remove]
Donation 2   $20.00    [remove]

Total: $30.00

问题：

  1. 一旦选择了捐赠类型，我无法弄清楚如何从选择列表中删除它们。
  2. 如果捐赠被删除，与该预留关联的类型应重新出现在选择列表中以用于新捐赠。我也不知道该怎么做。
  3. 您会注意到，当添加按钮时，jsfiddle 使用了硬编码的捐赠，该捐赠被推送到列表中。在将捐赠推送到列表时，我不知道如何引用选择和输入以使用它们。

编辑：

我已经更新了我的问题以给出我的实际用例并试图澄清我的问题是什么；我最初使用 learn.knockoutjs.com 中的列表示例，因为我认为它会更容易，但我认为它只是令人困惑。

我正在尝试做的事情的 JS Fiddle 。

4

1 回答 1

0

事实上，你已经非常接近让它发挥作用了。问题是您没有donationAmount在主视图模型中定义 observable 属性，这导致 KnockoutJS 在将此不可用属性绑定到输入标记时失败。

这是必须更改的代码部分，以便它现在可以工作：

function DonationsViewModel() {
            var self = this;
            self.donationAmount = ko.observable();
            // ....
}

以下是您的 HTML 的一些小改动：

<div>
    <select data-bind="options: availableDonations, optionsCaption: 'Please select...', value: selectedDonation, optionsText: 'label'"></select>
    <input data-bind="value: donationAmount"/>
    <button typ="button" data-bind="click: addDonation">Add Donation</button>
</div>

你可以在我的fork fiddle上看到结果。

于 2013-07-03T19:37:07.723 回答