使用Knockout JS解析JSON KO.mapping

时间：2014-03-11 23:50:28

标签： json knockout.js

我的服务器代码返回此有效的JSON文件。如何在敲除Js中为此创建ViewModel并将其绑定到表

[
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP6WAAV"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOWAAY"
        },
        "Name": "Edge Communications",
        "Id": "001i000000f2xOWAAY"
    },
    "Account__c": "001i000000f2xOWAAY",
    "Y_Plan__c": 0,
    "Id": "a01i000000ClP6WAAV",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP8eAAF"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOeAAI"
        },
        "Name": "sForce",
        "Id": "001i000000f2xOeAAI"
    },
    "Account__c": "001i000000f2xOeAAI",
    "Fiscal_Year__c": "2014",
    "Y_Plan__c": 0,
    "Region__c": "Australia",
    "Id": "a01i000000ClP8eAAF",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP80AAF"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOTAAY"
        },
        "Name": "GenePoint",
        "Id": "001i000000f2xOTAAY"
    },
    "Account__c": "001i000000f2xOTAAY",
    "Fiscal_Year__c": "2014",
    "Y_Plan__c": 0,
    "Region__c": "Asia",
    "Id": "a01i000000ClP80AAF",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClOYBAA3"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOZAAY"
        },
        "Name": "Dickenson plc",
        "Id": "001i000000f2xOZAAY"
    },
    "Account__c": "001i000000f2xOZAAY",
    "Fiscal_Year__c": "2014",
    "Y_Plan__c": 0,
    "Region__c": "South America",
    "Id": "a01i000000ClOYBAA3",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP8FAAV"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOZAAY"
        },
        "Name": "Dickenson plc",
        "Id": "001i000000f2xOZAAY"
    },
    "Account__c": "001i000000f2xOZAAY",
    "Fiscal_Year__c": "2014",
    "Y_Plan__c": 0,
    "Region__c": "North America",
    "Id": "a01i000000ClP8FAAV",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP8PAAV"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOYAAY"
        },
        "Name": "Pyramid Construction Inc.",
        "Id": "001i000000f2xOYAAY"
    },
    "Account__c": "001i000000f2xOYAAY",
    "Fiscal_Year__c": "2014",
    "Y_Plan__c": 0,
    "Region__c": "Europe",
    "Id": "a01i000000ClP8PAAV",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP7WAAV"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOUAAY"
        },
        "Name": "United Oil & Gas, UK",
        "Id": "001i000000f2xOUAAY"
    },
    "Account__c": "001i000000f2xOUAAY",
    "Y_Plan__c": 0,
    "Id": "a01i000000ClP7WAAV",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP5sAAF"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOWAAY"
        },
        "Name": "Edge Communications",
        "Id": "001i000000f2xOWAAY"
    },
    "Account__c": "001i000000f2xOWAAY",
    "Y_Plan__c": 0,
    "Id": "a01i000000ClP5sAAF",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP85AAF"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOaAAI"
        },
        "Name": "Grand Hotels & Resorts Ltd",
        "Id": "001i000000f2xOaAAI"
    },
    "Account__c": "001i000000f2xOaAAI",
    "Fiscal_Year__c": "2014",
    "Y_Plan__c": 0,
    "Region__c": "Europe",
    "Id": "a01i000000ClP85AAF",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP7RAAV"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOVAAY"
        },
        "Name": "United Oil & Gas, Singapore",
        "Id": "001i000000f2xOVAAY"
    },
    "Account__c": "001i000000f2xOVAAY",
    "Y_Plan__c": 0,
    "Id": "a01i000000ClP7RAAV",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP6MAAV"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOWAAY"
        },
        "Name": "Edge Communications",
        "Id": "001i000000f2xOWAAY"
    },
    "Account__c": "001i000000f2xOWAAY",
    "Y_Plan__c": 0,
    "Id": "a01i000000ClP6MAAV",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP7bAAF"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOdAAI"
        },
        "Name": "United Oil & Gas Corp.",
        "Id": "001i000000f2xOdAAI"
    },
    "Account__c": "001i000000f2xOdAAI",
    "Fiscal_Year__c": "2014",
    "Y_Plan__c": 0,
    "Region__c": "Australia",
    "Id": "a01i000000ClP7bAAF",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP7vAAF"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOXAAY"
        },
        "Name": "Burlington Textiles Corp of America",
        "Id": "001i000000f2xOXAAY"
    },
    "Account__c": "001i000000f2xOXAAY",
    "Fiscal_Year__c": "2014",
    "Y_Plan__c": 0,
    "Region__c": "North America",
    "Id": "a01i000000ClP7vAAF",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP6xAAF"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xObAAI"
        },
        "Name": "Express Logistics and Transport",
        "Id": "001i000000f2xObAAI"
    },
    "Account__c": "001i000000f2xObAAI",
    "Y_Plan__c": 0,
    "Id": "a01i000000ClP6xAAF",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP7qAAF"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOXAAY"
        },
        "Name": "Burlington Textiles Corp of America",
        "Id": "001i000000f2xOXAAY"
    },
    "Account__c": "001i000000f2xOXAAY",
    "Fiscal_Year__c": "2014",
    "Y_Plan__c": 0,
    "Region__c": "Asia",
    "Id": "a01i000000ClP7qAAF",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
},
{
    "attributes": {
        "type": "Financial__c",
        "url": "/services/data/v29.0/sobjects/Financial__c/a01i000000ClP8tAAF"
    },
    "Account__r": {
        "attributes": {
            "type": "Account",
            "url": "/services/data/v29.0/sobjects/Account/001i000000f2xOcAAI"
        },
        "Name": "University of Arizona",
        "Id": "001i000000f2xOcAAI"
    },
    "Account__c": "001i000000f2xOcAAI",
    "Fiscal_Year__c": "2013",
    "Y_Plan__c": 0,
    "Region__c": "North America",
    "Id": "a01i000000ClP8tAAF",
    "Z_Plan__c": 0,
    "ForcastLastYear__c": 0,
    "X_Plan__c": 0
}

映射可能类似于; 

viewModel = ko.mapping.fromJSON(data); //where data is the string above
ko.applyBindings(viewModel)

和表格类似; 

<table class="mails">
<thead><tr><th>Account</th><th>X_Plan</th><th>Y_Plan</th><th>Z_Plan</th><th>Total</th></tr></thead>
<tbody data-bind="foreach: viewModel">
    <tr>
        <td data-bind="text: Account__c"></td>
         <td data-bind="text: x_plan"></td>
        <td data-bind="text: y_plan"></td>
        <td data-bind="text: z_plan"></td>
        <td data-bind="text: forcast_year"> </td>  
    </tr>     
</tbody>

我查看了文档并且无法弄清楚这是如何工作的。

由于

1 个答案:

答案 0 :(得分：0)

您可能需要更改线路
var viewModel = ko.mapping.fromJSON(data);
到
var viewModel = ko.mapping.fromJS(data);

查看http://jsfiddle.net/gonefishern/syNR9/1/

旁注：我希望这是作为JSON片段的一部分包含的公共信息。

相关问题
最新问题