Question

我尝试在Stack Overflow上关注其他类似的问题，但到目前为止还没有成功解决问题。

我正在使用jQuery AJAX检索多个项目：联系人及其相关信息，所有可用的称呼类型，所有可用的电子邮件类型以及所有可用的电话类型。

我已成功将选项绑定到选择框。但是，它似乎会覆盖保存初始视图模型值的'value'绑定。

你们有没有人帮我解决这个问题？如果您有任何疑问需要澄清，请与我们联系。

请参阅以下代码：

查看型号：

function contactPageViewModel() {

    var self = this;
    self.contact = ko.observable();
    self.availableSalutations = ko.observableArray();
    self.availableEmailTypes = ko.observableArray();
    self.availablePhoneTypes = ko.observableArray();
    self.availableAddressTypes = ko.observableArray();
}

其中contact是来自服务器的对象，其中包含元素contact.salutation。

json回来联系是：

{
    //...
    "createdBy":null,
    "createdOn":1392848929000,
    "updatedBy":null,
    "updatedOn":1392848929000,
    "contactId":305,
    "salutation":{"salutationId":102,"salutation":"Mrs."},
    "firstName":"Laura",
    "middleInitial":"K",
    "lastName":"Ritchey" 
    //...
}

从availableSalutations（这是json对象包装器'listObject'的属性）返回的json是：

[{"salutationId":41,"salutation":"Ms."},
{"salutationId":101,"salutation":"Mr."},
{"salutationId":66,"salutation":"CDR"},
{"salutationId":81,"salutation":"LCDR"},
{"salutationId":102,"salutation":"Mrs."},
{"salutationId":121,"salutation":"Mr."},
{"salutationId":64,"salutation":"LTC"}]

将JSON结果映射到knockout observables的代码：

contactPageViewModel.contact = ko.mapping.fromJS(data.listObject[0]);
        contactPageViewModel.availableEmailTypes = ko.mapping
                .fromJS(data.listObject[1]);
        contactPageViewModel.availableSalutations = ko.mapping
                .fromJS(data.listObject[2]);
....
        applyBindings();

HTML：

<label for="rank"> Rank / Title: </label> 
<select data-bind="optionsText: 'salutation', 
                   options: availableSalutations, 
                   value: contactPageViewModel.contact.salutation"
        class="rankList" 
        name="Rank" 
        id="rankSelect">
</select>

Answer 1

尝试使用value: $root.contact().salutation代替value: contactPageViewModel.contact.salutation。

或者：

<label for="rank"> Rank / Title: </label>
<!-- ko with: contact -->
<select data-bind="options: $root.availableSalutations, optionsText: 'salutation', value: salutation" class="rankList" name="Rank" id="rankSelect">
</select>
<!-- /ko -->

<强>更新
你可以看看这个Fiddle。可能它包含很多多余的代码，你可以简化它，但主要的是分离初始和选择的称呼，并添加optionsCaption来选择绑定：

var initialSalutation = new salutationViewModel(data.salutation);

并且：

self.salutation = ko.observable();
self.displayedSalutation = ko.computed(function () {
    if (self.salutation()) {
        return self.salutation();
    } else {
        return initialSalutation;
    }
})

更新2：
看看这个Fiddle。我已添加optionsValue: 'salutationId'来选择绑定，并将displayedSalutation移至contactPageViewModel 我认为问题在于匹配对象（从联系中选择项目和称呼）。当select的值为salutationId且联系称呼salutationId（数值，而非对象）时，所有工作正常。

选项绑定覆盖初始视图模型值

1 个答案: