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/

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

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

然后，订阅SelectedPart更改并根据SelectedPart（）设置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将默认为新选定产品的价格（除非他们选择“选择...”行）。

希望这有帮助。

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

1 个答案: