Knockout.js 绑定选项:在选择中,无法在init上选择正确的值

Knockout.js 绑定选项:在选择中,无法在init上选择正确的值,knockout.js,Knockout.js,我有以下选择: <select data-bind=" options: states, optionsText: 'acronym', optionValue: 'stateId', value: state"> </select> 但是当我调用ko.applyBindings(newaddressviewmodel())时平均值状态丢失其原始

我有以下选择:

<select data-bind=" options: states, 
                    optionsText: 'acronym', 
                    optionValue: 'stateId', 
                    value: state">
</select>
但是当我调用ko.applyBindings(newaddressviewmodel())时平均值状态丢失其原始值,尽管该值在列表中


我已经尝试反转
getJSON
顺序(状态之前的状态,反之亦然),但没有发生任何新的情况。

您必须创建一个函数,并将代码块$.getJSON(“/api/v1/user/address/”)移动到函数内。然后,在调用ko.applyBindings(new AddressViewModel())后调用该函数这里实际上有一些问题

  • 数据绑定部分中的
    选项value
    值拼写错误
  • 如果正确拼写了
    选项value
    选项,当您从下拉列表中选择项目时,您将
    State.stateId
    写入
    AVM.State
    ;但是在初始化调用中创建一个对象:
    self.State(新状态(data.State))
    。您不能期望这样做;您正在使用对象引用进行初始化,但使用文本值进行更新
  • 如果您拼写的
    optionValue
    选项不正确,并且希望保持其工作状态,请首先删除
    optionValue
    ,以免混淆。接下来,请注意对象将写入
    AVM.state
    。对象等价性测试是通过引用而不是通过深入检查对象来完成的s值。您需要从
    AVM.states
    中提取一个引用,并将其写入
    AVM.state
    。类似以下内容:

    // Use the data.state.StateId to find the correct state from the states list.
    self.state(ko.utils.arrayFirst(self.states(), function (s) {
        return s.stateId() === data.state.StateId;
    }));
    
  • 如果在完成所有AJAX调用之前发生数据绑定,则初始化顺序非常重要。如果在完成所有AJAX调用之前发生数据绑定,则事件顺序如下:

  • 已开始对状态的AJAX调用
  • ko.applyBindings(AVM);
    被调用,选项:绑定空的
    AVM.states
    列表
  • AJAX for/api/v1/user/address完成,设置了
    AVM.state
  • 选项:绑定说明
    AVM.state
    不在
    AVM.states
    中,并将NULL写入
    AVM.state
  • AJAX for/api/v1/address/states完成后,
    AVM.states
    被设置
  • 选项:绑定现在使用
    AVM.states
    用选项更新下拉列表,默认情况下选择第一个选项
  • 你看着UI,想知道“发生了什么?”
  • 我已经附上了几个JSFiddles的参考资料,展示了解决这个问题的两种方法

    版本1-在数据绑定调用中使用
    选项value

    版本2-删除选项值并使用对象引用:

    事实上,我没有使用OptionValue。我之所以使用它,是因为我不知道还需要做什么。我的代码似乎与您在版本2中所做的非常接近,只是从您初始化状态的方式不同。我将对您的解决方案进行更深入的研究,看看是否发现了任何其他差异。感谢您非常详细的回答。啊,好的-在这种情况下,您只需要拉一下您的州列表中的参考使用了我在上面的答案中包含的ko.utils.arrayFirst call。很高兴能够提供帮助。:-)
    // Use the data.state.StateId to find the correct state from the states list.
    self.state(ko.utils.arrayFirst(self.states(), function (s) {
        return s.stateId() === data.state.StateId;
    }));