2016-09-23 4 views
0

knockout.jsテンプレートを使用してHTMLテーブルを作成しようとしています。ここで、バインドするプロパティの名前は非常に動的で、JSONとしてサーバーから返されます。ドット区切り文字列に基づくノックアウトバインド

JSONのような形式になります。

<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> 

は、私が使用してこれを行う方法を知っている:この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を生成したテンプレートを作成したいですjavascript関数を呼び出すカスタムhtmlバインディング、またはサーバー上でHTMLを作成してバインディングを適用することによって可能ですが、できるだけ多くの場合はテンプレートを使用します。

これはノックアウトの奇妙な使用ですが、JSONはサーバーから来ており、その形式は実行時に変更できます。

ありがとうございました。

+0

ノックアウトでこれを行う方法について説明します記事です:https://github.com/mbest/knockout-table –

答えて

0

他のMVVM実装としてのノックアウトでは、特定のマークアップを持つテンプレートを使用して、データを挿入する場所をノックアウトすることができます。

類似している剣道MVVMを使用します。テンプレートhtmlを取得してテンプレートをビュー・モデルにバインドするために、ajax呼び出しを使用してビューにテンプレートをロードします。スクリプトタグはまったく使用しません。ここで

これはあなたの法案に合うかもしれ

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

関連する問題