Json2Template.js jquery ベースのプラグインは、JavaScript オブジェクトを HTML templates_jquery にバインドします

コードをコピー コードは次のとおりです。

$("#div").bindTemplate({
ソース : json オブジェクト、
テンプレート : null | "

{{object}}

"、
dateFormat : "d.m.y"、
tagOpen : "{{",
tagClose : "}}"
});

bindTemplate(data): データオブジェクトをテンプレートにバインドするための操作メソッド

source : json 形式のデータ ソース

template:

null テンプレートは提供されず、InnerHtml はページ上で定義された HTML 構造を使用して
$(“#template”) を出力します。 template
"

{{...}}

" template
dateFormat: 時刻フォーマットメソッド

tagOpen: 開始タグ tag

tagClose : 終了タグ tag

このうち、dateFormat、tagOpen、tagClose は null でデフォルトの設定を採用することができます。デフォルトの tagOpen と tagClose には「{{」と「}} がマークされている」と言う必要があります。 "

Json2Template のアプリケーション
小さな例を通して Json2Template の簡単な使用法を見てみましょう

空の MVC3 プロジェクトを作成します

まず、次のオブジェクトが必要です渡されたデータを保存します

コードをコピーします コードは次のとおりです:

public class UserInfo
{
パブリック int ID { セット; }
パブリック文字列 { セット; }
}


仮想データ収集。実際のアプリケーション シナリオではデータベースにクエリを実行することで取得されるため

コードをコピー コードは次のとおりです:

private IList InitUserInfo()

{
IList users = new List 🎜>users.Add(new UserInfo () { ID = 1, 名前 = "チェンクン", 年齢 = 21, 住所 = "蘇州" });
users.Add(new UserInfo() { ID = 2, 名前= "張三"、年齢 = 21、住所 = "北京" });
users.Add(new UserInfo() { ID = 3、名前 = "麗思"、年齢 = "河南" }); ;
users.Add( new UserInfo() { ID = 4, 名前 = "王武", 年齢 = "上海" }); 、名前 = "Zhaoliu"、年齢 = "広州" });
users.Add(new UserInfo() { ID = 6、名前 = "胡斉"、年齢 = "重慶" });
return users ;
}


このコレクションを Json2Template にシリアル化する必要があります。アクションを定義する必要があります

コードをコピー

コードは次のとおりです: public JsonResult GetUserInfo () {

return Json(Newtonsoft.Json.JsonConvert.SerializeObject(InitUserInfo()), JsonRequestBehavior.AllowGet);

}


コレクションを json にシリアル化して有効にしますAjax が Get メソッドを渡せるようにリクエストを取得します。

を呼び出して json2template.js への参照を追加した後、Ajax リクエストを開始してバックグラウンドの JSON データを取得し、bindTemplate を使用して、取得したデータを決定します。 HTML テンプレートに表示されます

まず、単純な HTML テンプレートを定義します。




コードをコピーします

コードは次のとおりです ; "{{item}}">

{{年齢}}

番号	名前		住所
{{ID}}	{{名前}}	{{住所}

;


{ 注: {{item}} をクラスに定義すると、forarch と同様に項目オブジェクトのサブセットを走査することになります。 }

次に、このテンプレートを出力する HTML コンテナを定義します

コードをコピー


コードは次のとおりです:

最後に、JSON データをリクエストし、事前に想像した方法でテンプレートを定義します

コードをコピーします コードは次のとおりです:

F5 キーを押して実行し、効果を確認します

比較的簡単で、理論的には確かに優れているので、皆さんのお役に立てれば幸いです。

ソースコード:

Sample.Json2Template.rar