knockout select - 如何使用2个不同的observable设置默认值

时间:2015-09-16 10:23:09

标签: knockout.js

嗨,我在视图中有一个选择

<div data-bind="with: selectedInsurancePolicy">
                <select data-bind="options: $parent.insuranceCompanies,
                   optionsText: 'companyName',
                   value: $parent.selectedInsurancePolicy.companyID">
</select>

我正在尝试将选项列表绑定到一个事物,然后将值绑定到另一个事物。

以上是最新的迭代,但我尝试了很多选项。

我基本上想做:

  • 将所有公司及其ID列为值。
  • 在viewModel的另一部分中使用其ID

问题在于我不知道如何使用我的公司列表来填充选项,而是使用所选的选项来更改我的可观察保险政策

我猜我需要创建某种类型的计算器,但我对如何实现ID的'交叉引用'完全感到困惑。

我的viewModel位于

之下
var insuranceViewModel = function(companies, policies){
var self = this;

var companies = companies || {};
var policies = policies || {};


self.EditableInsuranceCompany = ko.observable();
self.EditableInsurancePolicy = ko.observable();

self.selectedInsuranceCompany = ko.observable();
self.selectedInsurancePolicy = ko.observable();
self.selectInsurancePolicyCompany = ko.observable();

self.insuranceCompanies = ko.observableArray(ko.utils.arrayMap(companies, function (company) {
    return new observableInsuranceCompany(company.id, company.name, company.address1, company.address2, company.city, company.postcode, company.phone, company.fax);
}));

self.insurancePolicies = ko.observableArray(ko.utils.arrayMap(policies, function (policy) {

    var companyName = ko.computed(function(){

        var company = ko.utils.arrayFirst(self.insuranceCompanies(), function(company) {
        return company.id == policy.companyID;
    })

    return company;
    });       
    console.log(companyName().companyName());
    return new observableInsurancePolicy(policy.id,policy.companyID,companyName().companyName(),policy.policyNumber,policy.expiry,policy.policyDetails);
}));

addInsurancePolicy = function(){
    return function(){
        totalInsurancePoliciesLoaded += 1;
        var company = new observableInsurancePolicy(totalInsurancePoliciesLoaded,1,"aviva","","","","","");
        self.insurancePolicies.push(company);
        self.selectedInsurancePolicy(company);
    };
};
}

1 个答案:

答案 0 :(得分:0)

<div data-bind="with: selectedInsurancePolicy">
                <select data-bind="options: $parent.insuranceCompanies,
                   optionsText: 'companyName',
                   value: $parent.selectedInsurancePolicy().companyID">
</select>

NB selectedInsurancePolicy()括号。因为它是一个可观察的,你需要调用它来检索内部的值。