Question

What should happen is the page loads, it calls the server for information about the order (at this point its just a list of possible order types and the id of the current type of the order). After the load the value of the select should be set to “selected_order_type” which it is.

However it looks like it just selecting it in the list and not actually setting the “value” of the select item to the current value. So for instance in my example it selects the 2nd option on load. If i then click the third option everything works if instead I clicked the first option first nothing happens and I am assuming it because the still had the first options value even though it was showing the second option as the selected option. (very new to knockout been using it for a couple hours just trying to get my head around how it works).

<select id="order_type_select"
                    data-bind="options:order_types,
                      optionsText:'order_type',
                      optionsValue:'order_type_id',
                      value:selected_order_type"/>

function update_order_field(order_id,field,value){
    var url = '/op/update_order_field'
    data = {'order_id':order_id,'field':field,'value':value};
    console.log(url);
    console.log(data);
}

function refresh_order_data(order_id,view_model){
    $.getJSON("/op/order_json/"+order_id,function(data){
        ko.mapping.fromJS(data,view_model);
    });
    console.log(view_model.selected_order_type);
}

function OrderData(){
    var self = this;
    self.order_types = [{}]
    self.selected_order_type = '0'
    return self
}

$(document).ready(function() {
    var order_id = $("#order_id").attr('order_id');
    var view_model = ko.mapping.fromJS(new OrderData());
    view_model.selected_order_type.subscribe(function(data){
        console.log(data);
    });
    refresh_order_data(order_id,view_model);
    ko.applyBindings(view_model);
});

Data coming in from server on initial load …

{
    order_types: [
        { order_type_id=1, order_type="Phone"},
        { order_type_id=2, order_type="Fax"},
        {order_type_id=3, order_type="Web"}
    ],
    selected_order_type = '2' 
}   

Answer 1

Problem was server side. Although I have no idea why as the output on the client is identical. I wrapped the returning value in json.dumps using python and everything works as intended