YUI DataTable使用KnockoutJS绑定 [英] YUI DataTable using KnockoutJS bindings

问题描述

我有一个在 JSFiddle 上工作的示例.

I have an example working at JSFiddle.

它有一个YUI数据表消耗的JSON，我需要使用KnockoutJS绑定来创建它.我对KnockoutJS相当陌生，想知道如何做到这一点.

It has a piece of JSON consumed by a YUI DataTable which I need to create using KnockoutJS bindings. I'm fairly new to KnockoutJS and would like to know how this can be done.

该表应在标记下创建-

<div class="yui3-skin-sam" id="datatable"></div>​

代码如下-

YUI().use('datatable', 'datasource-local', 'datasource-jsonschema',function(Y){
var data  = {"generations": [{
    "type": "Modern",
    "showName": "The Modern Generation",
    "imgURI": "file:/D:/projectGen.png",
    "relations": {
        "father": {
            "age": "49",
            "firstName": "George",
            "lastName": "Mathews",
            "priority": "1",
            "profession": "Service"
        },
        "mother": {
            "age": "47",
            "firstName": "Susan",
            "lastName": "Aldrin",
            "priority": "2",
            "profession": "Home-Maker"
        },
        "brother": {
            "age": "28",
            "firstName": "Martin",
            "lastName": "Mathews J",
            "priority": "3",
            "profession": "Engineer"
        },
        "sister": {
            "age": "23",
            "firstName": "Laura",
            "lastName": "Mathews J",
            "priority": "4",
            "profession": "Fashion Model"
        },
        "aunt": {
            "age": "50",
            "firstName": "Sally",
            "lastName": "Bekkers",
            "priority": "5",
            "profession": "Singer"                
        }
    }
 }]
};
var localDataSource = new Y.DataSource.Local({source:data});
var dynamicColumns = Y.Object.keys(data.generations[0].relations);
var config = {
    schema: {
        resultListLocator: 'generations',
        resultFields: [{key:'showName'}]
    }
};

Y.Array.each(dynamicColumns,function(key){
    config.schema.resultFields.push({
        key: key,
        locator: "relations."+key + ".firstName" 
    });
});

var jsonSchema = localDataSource.plug(Y.Plugin.DataSourceJSONSchema, config);
console.log(config.schema.resultFields); 
var table = new Y.DataTable({
    columns: config.schema.resultFields
});

table.plug(Y.Plugin.DataTableDataSource, {
    datasource: localDataSource
});

table.render('#datatable');
table.datasource.load();

})；

可以使用KnockoutJS出价吗?我知道可以使用KnockoutJS绑定很好地创建HTML表，但是我发现YUI部分很棘手.请帮忙.

Can this be done using KnockoutJS bidings? I know that an HTML table can be created well using KnockoutJS bindings but I find the YUI part tricky. Please help.

推荐答案

自定义绑定有助于解决此问题.我可以将数据表创建代码放在自定义绑定中，以便它将在调用该绑定的标记上创建表.很好.

A custom binding helps resolve this problem. I can put the datatable creation code in the custom binding so that it will create he table on the markup from which the binding was called. Cool.

这篇关于YUI DataTable使用KnockoutJS绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！