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

我一直在使用一个简单的列表，就像上的教程一样，使用列表和集合。我想有一个列表式的应用程序，用户选择捐赠类型并输入金额，然后将捐赠添加到列表中

本教程的工作原理是在单击按钮时添加输入；我正在努力解决如何在一行中添加文本值的固定输入

假设已经进行了两次捐赠，用户界面看起来像这样，选择从三种捐赠类型开始，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

问题:

一旦选择了捐赠类型，我想不出如何从选择列表中删除它们。 如果删除捐赠，则与该保留相关联的类型应重新出现在选择列表中，以便与新捐赠一起使用。我也不知道该怎么做。 您会注意到，当添加按钮时，JSFIDLE使用了一个硬编码的捐赠，该捐赠被推到列表中。我不知道在将捐款推到列表上时如何引用选择和输入来使用它们。 编辑：

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

---

一把JS小提琴

事实上，你很快就能让它工作了。问题是您没有在主视图模型中定义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>

---

您可以在my上看到结果。

好的，但是您的代码在哪里？到目前为止您已经尝试了哪些代码？你的视图模型和html看起来怎么样？你的问题是什么？他列出了要求。。。现在去为他构建他的应用程序…我不是要求为我构建我的应用程序。我正在努力修改learn.knockoutjs.com上的教程，以便在添加列表项之前而不是之后获取用户输入。我已经添加了一些我正在尝试做的事情。谢谢Jalayn，自从我发布了这个问题以来，我一直在努力解决这个问题，我最近的一把小提琴就在这里-。在使用捐赠类型后，我仍在尝试从选择中删除捐赠类型，如果捐赠被删除，则重新添加捐赠类型。与提交相比，使用单击有什么好处？我已经在knockoutjs文档中看到了这两种方法。谢谢Nick，事实上，如果您除了单击submit按钮之外还想捕获enter键事件，那么使用submit绑定还有一个优势。在你的情况下，我认为现在这是一个好主意，这就是为什么我删除了我的评论，但我个人更喜欢使用点击绑定，因为它允许我立即看到在包含2000多行的点击HTML文件上执行的操作，真的吗matters@NickSilberstein提交更好，但我想你需要在某处提交一份表格。click事件将仅对按钮起作用，而input还将触发提交事件到最近的表单标记。此外，某些浏览器功能（如为自动填充保存字段）仅适用于提交事件。这就是说，用敲除法自动填充非常糟糕，因为并不是每个浏览器在自动填充输入时都会触发任何事件。您的分叉小提琴工作不太正常，但肯定有助于解决最初的问题。把你的答案标记为正确，谢谢。