如何为使用JSON数据的YUI DataTable创建KnockoutJS模板?

时间:2012-08-30 20:08:29

标签: jquery knockout.js yui yui-datatable knockout-mvc

我想使用KnockoutJS数据绑定来模板化YUI3数据表的创建。 假设我有以下JSON字符串 -

{     “@lang”:“en-US”,

"cartItem": {
    "@lang": "en-US",
    "cartId": "14",
    "items": [
        {
            "@lang": "en-US",
            "id": "5",
            "name": "global/network/main",
            "propertyURL": "mail.yahoo.com",
            "rootPropertyName": "All Other",
            "spaceId": "2023407535"
        },
        {
            "@lang": "en-US",
            "id": "5",
            "name": "global/network/main",
            "propertyURL": "mail.yahoo.com",
            "rootPropertyName": "All Other",
            "spaceId": "2023407535"
        }
    ]
},
"status": {
    "@lang": "en-US",
    "message": "",
    "status": "success"
}

}

我正在使用以下代码创建消耗上述JSON的YUI数据表 -

YUI()。use(“datatable”,“datatable-datasource”,“datasource-local”,“datasource-jsonschema”,function(Y){

    var jsonString = Y.one("#jsondata").getHTML();

    var dtsource = new Y.DataSource.Local({source:jsonString});
    dtsource.plug(Y.Plugin.DataSourceJSONSchema, {
        4schema: {
            resultListLocator: "cartItem.items",
            resultFields: [
            // Re-map the "id" member to "rid" ...    
                { key:"rid", locator:"id"},
                "name", "propertyURL", "rootPropertyName"
            ]
        }
    });

    var colums = ["rid", "name", "propertyURL", "rootPropertyName"];

    var dtable = new Y.DataTable({  
        columns: colums,
        summary:"Shopping cart items",
        caption:"Table with JSON data from api"});

    dtable.plug( Y.Plugin.DataTableDataSource,{
        datasource:dtsource
    });

    dtable.render("#jsonapi-datatable");
    dtable.datasource.load({request:"&id=14"});        
});

如何为上面的代码创建一个KnockoutJS模板?

小提琴 - http://jsfiddle.net/pPY7K/6/

1 个答案:

答案 0 :(得分:0)

使用KnockoutJS自定义绑定,然后使用该绑定创建模板。