I would like to create a select list on my view that allows the client to chose the customer from that select list.

My view model looks like this:

public int SalesOrderId { get; set; }
public int CustomerId { get; set; }
public string PONumber { get; set; }
public DateTime OrderDate { get; set; }

public List<Customer> Customers { get; set; }
public List<SalesOrderItemViewModel> SalesOrderItems { get; set; }

My Customer model looks like this:

public int CustomerId { get; set; }
public string CustomerName { get; set; }

My knockout js looks like this:

SalesOrderViewModel = function (data) {
    var self = this;
    // This automatically creates my view model properties for ko from my view model passed from the server
    ko.mapping.fromJS(data, salesOrderItemMapping, self);

    // .... Other save functions etc.
};

[Edit] Sales Item mappings as requested

var salesOrderItemMapping = {
    'SalesOrderItems': {
        // key for each child
        key: function (salesOrderItem) {
            return ko.utils.unwrapObservable(salesOrderItem.SalesOrderItemId);
        },
        // Tell knockout what to fo for each sales order item it needs to create
        create: function (options) {
            // create a new sales order item view model using the model passed to the mapping definition
            return new SalesOrderItemViewModel(options.data); // Notice data is a property of the options object
            // Moreover, data is the data for this child and options is the object containing the parent
        }
    }
};

[Edit] @Html.Raw(data) as requested:

{"SalesOrderId":1,"CustomerId":1,"PONumber":"123456","OrderDate":"2015-01-25T00:00:00","MessageToClient":"The original value of Customer Name is Ashfield Clutch Services.","ObjectState":0,"Customer":{"CustomerId":1,"CustomerName":"Ashfield Clutch Services"},"SalesOrderItems":[{"SalesOrderItemId":1,"ProductCode":"ABC","Quantity":10,"UnitPrice":1.23,"SalesOrderId":1,"ObjectState":0},{"SalesOrderItemId":2,"ProductCode":"XYZ","Quantity":7,"UnitPrice":14.57,"SalesOrderId":1,"ObjectState":0},{"SalesOrderItemId":3,"ProductCode":"SAMPLE","Quantity":3,"UnitPrice":15.00,"SalesOrderId":1,"ObjectState":0}],"SalesOrderItemsToDelete":[],"Customers":[{"CustomerId":1,"CustomerName":"Ashfield Clutch Services"},{"CustomerId":3,"CustomerName":"Davcom-IT Ltd"},{"CustomerId":2,"CustomerName":"Fluid Air Conditioning"}]}

And at the top of my view I have this js:

<script src="~/Scripts/salesOrderViewModel.js"></script>
<script type="text/javascript">
    var salesOrderViewModel = new SalesOrderViewModel(@Html.Raw(data));
    ko.applyBindings(salesOrderViewModel);
</script>

If I bind my select list to the Customers collection in my view model the select list doesn't appear to be bound correctly:

<select class="form-control" name="Customers" id="Customers" data-bind="options: Customers, optionsText: CustomerName, optionsValue: CustomerId, value: CustomerId"></select>

You can see that instead of showing the customers it shows "[object Window]" for all of the customers. I think it could be half way there as it shows the correct number of "[object Window]" vs the number of clients in the db.

I understand that the Customers must be a knockout observable array but I'm not sure how to apply this to my js view model.

Any help would be appreciated.

Arent you missing "" in options text and options value ?

<select class="form-control" name="Customers" id="Customers" data-bind="options: Customers, optionsText: "CustomerName", optionsValue: "CustomerId", value: CustomerId"></select>

more