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

Question

I have a fairly simple order creation form on a back office app I'm building. The scenario I cannot figure out is under the "Order lines" section of the form. I want it so that you click add row the row appears which contains a drop down containing all the products, then 2 text boxes for quantity and price. I want it so that when a product is selected, that products price is set as the default value in the Price text box, but the use is able to change it still.

So far I have everything in- you can add rows, you can select the part- the only piece i cannot figure out how to do correctly is to populate the default price. So a cut down version of my knockout viewModel looks like this;

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); 
        }
    }

The Sale lines are rendered out through a template like this;

<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>

The actual Parts collection comes from the backend MVC, and is passed as a List with PartDTO just having Id, Description and Price.

I just cannot think of the correct way to do this- i figured I maybe make the Id field of each SaleLine observable when I create it then somehow make it update the SalePrice on update, but just can't think how to implement it?

Thanks in advance for your help!

Answer 1

How about something like this: http://jsfiddle.net/rniemeyer/VLVuC/

Basically, make it so the "value" of the dropdown is a "SelectedPart" observable that is set to the corresponding Part object:

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

Then, subscribe to the SelectedPart changing and set your SalePrice based on SelectedPart().Price.

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);

Whenever, the dropdown changes on a row, then the SalePrice will be defaulted to the new selected product's price (unless they pick the "Select..." line).

Hope this helps.