2016-09-23 81 views
0

我正在尝试使用knockout.js模板创建HTML表格,其中要绑定的属性的名称非常动态,并且从服务器返回为JSON。基于点分隔字符串的基因敲除

的JSON是一样的格式:鉴于这种JSON

{"Columns": [ 
    {"Title": "First Name", "Bind": "Person.FirstName"}, 
    {"Title": "Last Name", "Bind": "Person.LastName"}, 
    {"Title": "Birth Date", "Bind": "Person.DOB"} 
    ], 
    "Rows": [ 
    { 
     "Person": { 
      "FirstName": "James", 
      "LastName": "Jameson", 
      "DOB": "5/7/1965" 
     }, 
     "Person": { 
      "FirstName": "Bob", 
      "LastName": "Bobson", 
      "DOB": "12/15/1976" 
     } 
     } 
    ] 
} 

,我想创建生成以下HTML模板:

<table> 
    <thead> 
    <tr> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Birth Date</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>James</td> 
     <td>Jameson</td> 
     <td>5/7/1965</td> 
    </tr> 
    <tr> 
     <td>Bob</td> 
     <td>Bobson</td> 
     <td>12/15/1976</td> 
    </tr> 
    </tbody> 
<table> 

我知道如何使用要做到这一点一个自定义的html绑定,它调用一个javascript函数或者通过在服务器上创建HTML并应用绑定到它,但我宁愿尽可能使用模板。

据我所知,这是一个奇怪的使用淘汰赛,但JSON来自服务器和它的格式可以在运行时更改。

感谢您的任何帮助。

+0

这可能会适合您的账单这样做的一篇文章:https://github.com/mbest/knockout-table –

回答

0

与其他MVVM实现一样,可以使用具有特定标记的模板,让模型知道插入数据的位置。

我们使用类似的Kendo MVVM。我们使用ajax调用将模板加载到视图中,以检索模板html并将模板绑定到视图模型。我们根本不使用脚本标签。

下面是介绍如何使用淘汰赛

http://knockoutjs.com/documentation/template-binding.html