knockoutjs - 如何在添加列表项之前使用条目创建列表样式应用程序

时间:2013-07-03 18:43:59

标签: knockout.js

我一直在使用一个简单的列表,比如learn.knockoutjs.com上的教程,“使用列表和集合”。我希望有一个列表样式的应用程序,用户选择捐赠类型并输入金额,然后将捐款添加到列表中。

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

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

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使用硬编码的捐赠,该捐赠会被推送到列表中。我不知道在将捐款推到名单上时如何引用选择和输入来使用它们。
  4. 编辑:

    我已经更新了我的问题以提供我的实际用例,并尝试澄清我的问题是什么;我最初使用了learn.knockoutjs.com的列表示例,因为我认为它会更容易,但我认为这只是令人困惑。

    JS小提琴for what I'm trying to do.

1 个答案:

答案 0 :(得分: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>

您可以在forked fiddle上看到结果。