Question

I want to templatize the creation of a YUI3 datatable using KnockoutJS data bindings.
Let’s say I have following JSON string –

{
“@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"
}

}

And I’m using the following code to create the YUI datatable consuming the above JSON –

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"});        
});

How can create a KnockoutJS template for the above code?

Fiddle at – http://jsfiddle.net/pPY7K/6/

Answer 1

Use KnockoutJS custom bindings and then create a template using that binding.