2012-09-10 85 views
0

我有一个工作在JSFiddle的例子。YUI DataTable使用KnockoutJS绑定

它有一块JSON数据表所使用的JSON,我需要使用KnockoutJS绑定来创建它。我对KnockoutJS相当陌生,并想知道如何做到这一点。

表应的标记下创建 -

<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部分很棘手。请帮忙。

回答

0

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

0

我假设你需要添加一些数据绑定属性到你的表格单元格。 YUI表格允许您通过使用模板自定义TD元素创建。看看the YUI documentation for more information on this

+0

有没有办法使用Knockout绑定来做到这一点?如何使用'html'绑定到这个问题? 我阅读了你建议的YUI文档,但似乎并不适用于问题的上下文。 – StackOverflow

+0

你是什么意思“使用敲除绑定”?这不是什么数据绑定属性? – klamping