使用下拉选择在 KnockoutJS 中使用默认值填充文本框

Question

我正在构建的后台应用程序上有一个相当简单的订单创建表单。我无法弄清楚的情况在表格的“订单行”部分下。我想要它，以便您单击添加行，该行出现，其中包含一个包含所有产品的下拉列表，然后是数量和价格的 2 个文本框。我希望它在选择产品时，将产品价格设置为价格文本框中的默认值，但用户仍然可以更改它。

到目前为止，我已经拥有了所有内容-您可以添加行，您可以选择部分-我无法弄清楚如何正确执行的唯一部分是填充默认价格。所以我的淘汰视图模型的精简版看起来像这样；

viewModel = {
        Parts : ko.observableArray(initialData.Parts),
        Sale : ko.observable(initialData.Sale),
        SaleLines : ko.observableArray(initialData.SaleLines),
        addRow: function() {
                this.SaleLines.push({ Id: "00000000-0000-0000-0000-000000000000", SalePrice : 0.00, Qty : 1, PartId: "" });
                $("select").combobox({
                    selected: function (event, ui) {
                        $(ui.item.parentNode).change();
                    }
                });
        }, 
        removeRow: function (r) { 
            this.SaleLines.remove(r); 
        }
    }

销售线通过这样的模板呈现出来；

<script type="text/html" id="saleLineTemplate"> 
    <tr>
        <td>
            <select data-bind='options: viewModel.Parts, optionsText: "Description", optionsCaption: "Select...", optionsValue: "Id", value: PartId, uniqueName: true' class="mustPopulateDropdown"></select>
        </td>
        <td>
            <input data-bind="value: Qty, uniqueName: true" class="required number"/>
        </td>
        <td>
            <input data-bind="value: SalePrice, uniqueName: true" class="required number"/>
        </td>
        <td>
            <a href="#" data-bind="click: function() { viewModel.removeRow($data) }">Delete</a>
        </td>
    </tr>
</script>

实际的 Parts 集合来自后端 MVC，并作为 List 传递，其中 PartDTO 只有 Id、Description 和 Price。

我只是想不出正确的方法来做到这一点-我想我可能会在创建每个 SaleLine 时将其 Id 字段设为可观察，然后以某种方式使其在更新时更新 SalePrice，但就是想不出如何实现是吗？

提前感谢您的帮助！

Answer 1

这样的事情怎么样：http://jsfiddle.net/rniemeyer/VLVuC/

基本上，使下拉菜单的“值”是设置为相应 Part 对象的“SelectedPart”可观察对象：

<select data-bind='options: viewModel.Parts, optionsText: "Description", optionsCaption: "Select...", value: SelectedPart, uniqueName: true' class="mustPopulateDropdown"></select>

然后，订阅 SelectedPart 更改并根据 SelectedPart().Price 设置您的 SalePrice。

addRow: function() {
    var newRow = {
        Id: "00000000-0000-0000-0000-000000000000",
        Qty: ko.observable(1),
        SalePrice: ko.observable(0),
        SelectedPart: ko.observable()
    };

    newRow.SelectedPart.subscribe(function() {
        this.SalePrice(this.SelectedPart() ? this.SelectedPart().Price : 0);
    }, newRow);

每当下拉菜单连续更改时，SalePrice 将默认为新选定产品的价格（除非他们选择“选择...”行）。

希望这会有所帮助。