javascript - knockout.js/如何响应绑定(bind)下拉列表的变化事件

标签 javascript knockout.js

应该发生的是页面加载,它调用服务器以获取有关订单的信息(此时它只是一个可能的订单类型列表和当前订单类型的 ID)。加载后,select 的值应设置为“selected_order_type”。

但是看起来它只是在列表中选择它,而不是实际将选择项的“值”设置为当前值。因此,例如在我的示例中,它在加载时选择了第二个选项。如果我然后单击第三个选项,一切正常,如果我先单击第一个选项,则什么也没有发生,我假设它是因为即使它显示第二个选项作为所选选项,它仍然具有第一个选项值。 (对 Knockout 非常陌生,已经使用了几个小时,只是想了解它是如何工作的)。

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

初始加载时从服务器传入的数据...

{
    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' 
}   

最佳答案

问题出在服务器端。虽然我不知道为什么客户端上的输出是相同的。我使用 python 将返回值包装在 json.dumps 中,一切都按预期进行

关于javascript - knockout.js/如何响应绑定(bind)下拉列表的变化事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8978637/

相关文章:

javascript - Vuejs 使用 Props 访问模态组件中的数据

javascript - Knockoutjs - 具有绑定(bind)和状态

javascript - 在 Knockout 中保存原始值

javascript - http.listen() 在运行时接受终端命令

javascript - moment-timezone.js 转换错误

javascript - 挖空内容可编辑自定义绑定(bind)

javascript - KO.js foreach 绑定(bind)中的分组结果

javascript - Knockout JS html 绑定(bind)返回奇怪的代码而不是 html 字符串

javascript - 折叠后隐藏按钮在 Bootstrap 中切换

javascript - 如何用Javascript增加存储在变量中的变量?