2016-09-23 48 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