如何使用knockoutjs显示来自多个表的数据？

时间：2013-11-29 03:35:20

标签： knockout.js

我想使用knockout JS显示关系表中的数据。我有以下JSON 

[
    {
        "Land": {
            "Description": "Fairfax land",
            "ID": 1,
            "CreateDate": null,
            "CreatedBy": null,
            "UpdateDate": null,
            "UpdatedBy": null
        },
        "Zoning": {
            "Description": "VA Zoning",
            "ID": 1,
            "CreateDate": null,
            "CreatedBy": null,
            "UpdateDate": null,
            "UpdatedBy": null
        },
        "Insurence": {
            "CompanyName": "Geico",
            "Address": null,
            "Phone": null,
            "ID": 1,
            "CreateDate": null,
            "CreatedBy": null,
            "UpdateDate": null,
            "UpdatedBy": null
        },
        "LandID": 1,
        "ZoningID": 1,
        "InsuranceID": 1,
        "MapNum": "M-452658",
        "TaxDistrict": 8754,
        "LandArea": 526.36,
        "Utilities": "Temp",
        "IsRoadPaved": true,
        "SiteCondition": "GOOD",
        "LandAssesmentValue": 5.32,
        "BuildingAssesmentValue": 4.56,
        "BuildingUsage": "Yes",
        "Style": "NT",
        "ExteriorWallMaterial": "TY",
        "Roof": "KI",
        "Basement": "GBH",
        "BasementSize": 452.3,
        "YearBuilt": "/Date(1138766400000)/",
        "YearAddition": "/Date(1329278400000)/",
        "YearRemodeled": "/Date(1359864000000)/",
        "BedRoom": 4,
        "FullBath": 3,
        "HalfBath": 2,
        "FirePlace": 3,
        "BasementRoom": 5,
        "Heating": "GRF",
        "ConstructionQuality": "BETTER",
        "PhysicalCondition": "GOOD",
        "HasSwimmingPool": true,
        "SwimmingPoolSize": 25.1,
        "WoodDeck": 23.5,
        "Porch": 21,
        "Garagae": 2,
        "PurchasePrice": 847.32,
        "PurchaseDate": "/Date(1202788800000)/",
        "SalePrice": 5871.2,
        "SaleDate": "/Date(1327204800000)/",
        "IsManagementAssociation": true,
        "ManagementName": "GTR",
        "ManagementAddress": "King Street",
        "ManagementPhone": "58758",
        "ManagementFee": 500,
        "PolicyNumber": "P-0121",
        "ID": 1,
        "CreateDate": "/Date(1357963200000)/",
        "CreatedBy": 1,
        "UpdateDate": null,
        "UpdatedBy": null
    },
    {
        "Land": {
            "Description": "Fairfax land",
            "ID": 1,
            "CreateDate": null,
            "CreatedBy": null,
            "UpdateDate": null,
            "UpdatedBy": null
        },
        "Zoning": {
            "Description": "VA Zoning",
            "ID": 1,
            "CreateDate": null,
            "CreatedBy": null,
            "UpdateDate": null,
            "UpdatedBy": null
        },
        "Insurence": {
            "CompanyName": "Geico",
            "Address": null,
            "Phone": null,
            "ID": 1,
            "CreateDate": null,
            "CreatedBy": null,
            "UpdateDate": null,
            "UpdatedBy": null
        },
        "LandID": 1,
        "ZoningID": 1,
        "InsuranceID": 1,
        "MapNum": "M-452658",
        "TaxDistrict": 8754,
        "LandArea": 526.36,
        "Utilities": "Temp",
        "IsRoadPaved": true,
        "SiteCondition": "GOOD",
        "LandAssesmentValue": 5.32,
        "BuildingAssesmentValue": 4.56,
        "BuildingUsage": "Yes",
        "Style": "NT",
        "ExteriorWallMaterial": "TY",
        "Roof": "KI",
        "Basement": "GBH",
        "BasementSize": 452.3,
        "YearBuilt": "/Date(1138766400000)/",
        "YearAddition": "/Date(1329278400000)/",
        "YearRemodeled": "/Date(1359864000000)/",
        "BedRoom": 4,
        "FullBath": 3,
        "HalfBath": 2,
        "FirePlace": 3,
        "BasementRoom": 5,
        "Heating": "GRF",
        "ConstructionQuality": "BETTER",
        "PhysicalCondition": "GOOD",
        "HasSwimmingPool": true,
        "SwimmingPoolSize": 25.1,
        "WoodDeck": 23.5,
        "Porch": 21,
        "Garagae": 2,
        "PurchasePrice": 847.32,
        "PurchaseDate": "/Date(1202788800000)/",
        "SalePrice": 5871.2,
        "SaleDate": "/Date(1327204800000)/",
        "IsManagementAssociation": true,
        "ManagementName": "GTR",
        "ManagementAddress": "King Street",
        "ManagementPhone": "58758",
        "ManagementFee": 500,
        "PolicyNumber": "P-0121",
        "ID": 2,
        "CreateDate": "/Date(1357963200000)/",
        "CreatedBy": 1,
        "UpdateDate": null,
        "UpdatedBy": null
    }
]

现在我不想使用LandID来显示Land类的描述，当点击添加/编辑时，这个地面数据将显示为下拉列表。

2 个答案:

答案 0 :(得分：1)

以下是帮助Option绑定的代码。 如果想添加你可以推方法

您可以使用selectedOptions属性

更改选择

您的JS档案

self.list1 = ko.observableArray([{"Land":{"Description":"Fairfax land","ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"Zoning":{"Description":"VA Zoning","ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"Insurence":{"CompanyName":"Geico","Address":null,"Phone":null,"ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"LandID":1,"ZoningID":1,"InsuranceID":1,"MapNum":"M-452658","TaxDistrict":8754,"LandArea":526.36,"Utilities":"Temp","IsRoadPaved":true,"SiteCondition":"GOOD","LandAssesmentValue":5.32,"BuildingAssesmentValue":4.56,"BuildingUsage":"Yes","Style":"NT","ExteriorWallMaterial":"TY","Roof":"KI","Basement":"GBH","BasementSize":452.3,"YearBuilt":"\/Date(1138766400000)\/","YearAddition":"\/Date(1329278400000)\/","YearRemodeled":"\/Date(1359864000000)\/","BedRoom":4,"FullBath":3,"HalfBath":2,"FirePlace":3,"BasementRoom":5,"Heating":"GRF","ConstructionQuality":"BETTER","PhysicalCondition":"GOOD","HasSwimmingPool":true,"SwimmingPoolSize":25.1,"WoodDeck":23.5,"Porch":21,"Garagae":2,"PurchasePrice":847.32,"PurchaseDate":"\/Date(1202788800000)\/","SalePrice":5871.2,"SaleDate":"\/Date(1327204800000)\/","IsManagementAssociation":true,"ManagementName":"GTR","ManagementAddress":"King Street","ManagementPhone":"58758","ManagementFee":500,"PolicyNumber":"P-0121","ID":1,"CreateDate":"\/Date(1357963200000)\/","CreatedBy":1,"UpdateDate":null,"UpdatedBy":null},
            {"Land":{"Description":"Fairfax land 2","ID":2,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"Zoning":{"Description":"VA Zoning","ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"Insurence":{"CompanyName":"Geico","Address":null,"Phone":null,"ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"LandID":1,"ZoningID":1,"InsuranceID":1,"MapNum":"M-452658","TaxDistrict":8754,"LandArea":526.36,"Utilities":"Temp","IsRoadPaved":true,"SiteCondition":"GOOD","LandAssesmentValue":5.32,"BuildingAssesmentValue":4.56,"BuildingUsage":"Yes","Style":"NT","ExteriorWallMaterial":"TY","Roof":"KI","Basement":"GBH","BasementSize":452.3,"YearBuilt":"\/Date(1138766400000)\/","YearAddition":"\/Date(1329278400000)\/","YearRemodeled":"\/Date(1359864000000)\/","BedRoom":4,"FullBath":3,"HalfBath":2,"FirePlace":3,"BasementRoom":5,"Heating":"GRF","ConstructionQuality":"BETTER","PhysicalCondition":"GOOD","HasSwimmingPool":true,"SwimmingPoolSize":25.1,"WoodDeck":23.5,"Porch":21,"Garagae":2,"PurchasePrice":847.32,"PurchaseDate":"\/Date(1202788800000)\/","SalePrice":5871.2,"SaleDate":"\/Date(1327204800000)\/","IsManagementAssociation":true,"ManagementName":"GTR","ManagementAddress":"King Street","ManagementPhone":"58758","ManagementFee":500,"PolicyNumber":"P-0121","ID":2,"CreateDate":"\/Date(1357963200000)\/","CreatedBy":1,"UpdateDate":null,"UpdatedBy":null},
        {"Land":{"Description":"Fairfax land 3","ID":3,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"Zoning":{"Description":"VA Zoning","ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"Insurence":{"CompanyName":"Geico","Address":null,"Phone":null,"ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"LandID":1,"ZoningID":1,"InsuranceID":1,"MapNum":"M-452658","TaxDistrict":8754,"LandArea":526.36,"Utilities":"Temp","IsRoadPaved":true,"SiteCondition":"GOOD","LandAssesmentValue":5.32,"BuildingAssesmentValue":4.56,"BuildingUsage":"Yes","Style":"NT","ExteriorWallMaterial":"TY","Roof":"KI","Basement":"GBH","BasementSize":452.3,"YearBuilt":"\/Date(1138766400000)\/","YearAddition":"\/Date(1329278400000)\/","YearRemodeled":"\/Date(1359864000000)\/","BedRoom":4,"FullBath":3,"HalfBath":2,"FirePlace":3,"BasementRoom":5,"Heating":"GRF","ConstructionQuality":"BETTER","PhysicalCondition":"GOOD","HasSwimmingPool":true,"SwimmingPoolSize":25.1,"WoodDeck":23.5,"Porch":21,"Garagae":2,"PurchasePrice":847.32,"PurchaseDate":"\/Date(1202788800000)\/","SalePrice":5871.2,"SaleDate":"\/Date(1327204800000)\/","IsManagementAssociation":true,"ManagementName":"GTR","ManagementAddress":"King Street","ManagementPhone":"58758","ManagementFee":500,"PolicyNumber":"P-0121","ID":2,"CreateDate":"\/Date(1357963200000)\/","CreatedBy":1,"UpdateDate":null,"UpdatedBy":null}]);


        self.selectOption = ko.observableArray([2]);

你的Html 

<select data-bind="options: list1, optionsText: function(item) {
                       return item.Land.Description 
                       },  optionsValue: function(item) {
                       return item.Land.ID 
                       },
                       optionsCaption: 'Select',
                        selectedOptions: selectOption">

答案 1 :(得分：0)

你可以这样做。

在像

这样的ViewModel函数中 
self.list1 = ko.observableArray([{"Land":{"Description":"Fairfax land","ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"Zoning":{"Description":"VA Zoning","ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"Insurence":{"CompanyName":"Geico","Address":null,"Phone":null,"ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"LandID":1,"ZoningID":1,"InsuranceID":1,"MapNum":"M-452658","TaxDistrict":8754,"LandArea":526.36,"Utilities":"Temp","IsRoadPaved":true,"SiteCondition":"GOOD","LandAssesmentValue":5.32,"BuildingAssesmentValue":4.56,"BuildingUsage":"Yes","Style":"NT","ExteriorWallMaterial":"TY","Roof":"KI","Basement":"GBH","BasementSize":452.3,"YearBuilt":"\/Date(1138766400000)\/","YearAddition":"\/Date(1329278400000)\/","YearRemodeled":"\/Date(1359864000000)\/","BedRoom":4,"FullBath":3,"HalfBath":2,"FirePlace":3,"BasementRoom":5,"Heating":"GRF","ConstructionQuality":"BETTER","PhysicalCondition":"GOOD","HasSwimmingPool":true,"SwimmingPoolSize":25.1,"WoodDeck":23.5,"Porch":21,"Garagae":2,"PurchasePrice":847.32,"PurchaseDate":"\/Date(1202788800000)\/","SalePrice":5871.2,"SaleDate":"\/Date(1327204800000)\/","IsManagementAssociation":true,"ManagementName":"GTR","ManagementAddress":"King Street","ManagementPhone":"58758","ManagementFee":500,"PolicyNumber":"P-0121","ID":1,"CreateDate":"\/Date(1357963200000)\/","CreatedBy":1,"UpdateDate":null,"UpdatedBy":null},{"Land":{"Description":"Fairfax land","ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"Zoning":{"Description":"VA Zoning","ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"Insurence":{"CompanyName":"Geico","Address":null,"Phone":null,"ID":1,"CreateDate":null,"CreatedBy":null,"UpdateDate":null,"UpdatedBy":null},"LandID":1,"ZoningID":1,"InsuranceID":1,"MapNum":"M-452658","TaxDistrict":8754,"LandArea":526.36,"Utilities":"Temp","IsRoadPaved":true,"SiteCondition":"GOOD","LandAssesmentValue":5.32,"BuildingAssesmentValue":4.56,"BuildingUsage":"Yes","Style":"NT","ExteriorWallMaterial":"TY","Roof":"KI","Basement":"GBH","BasementSize":452.3,"YearBuilt":"\/Date(1138766400000)\/","YearAddition":"\/Date(1329278400000)\/","YearRemodeled":"\/Date(1359864000000)\/","BedRoom":4,"FullBath":3,"HalfBath":2,"FirePlace":3,"BasementRoom":5,"Heating":"GRF","ConstructionQuality":"BETTER","PhysicalCondition":"GOOD","HasSwimmingPool":true,"SwimmingPoolSize":25.1,"WoodDeck":23.5,"Porch":21,"Garagae":2,"PurchasePrice":847.32,"PurchaseDate":"\/Date(1202788800000)\/","SalePrice":5871.2,"SaleDate":"\/Date(1327204800000)\/","IsManagementAssociation":true,"ManagementName":"GTR","ManagementAddress":"King Street","ManagementPhone":"58758","ManagementFee":500,"PolicyNumber":"P-0121","ID":2,"CreateDate":"\/Date(1357963200000)\/","CreatedBy":1,"UpdateDate":null,"UpdatedBy":null}]);

和你的html结构一样

<div data-bind="foreach : list1">
    <div data-bind="with: Land">
        <div data-bind="text : Description">
        </div>
    </div>
</div>
相关问题
最新问题