ホームページ ウェブフロントエンド jsチュートリアル Json2Template.js jquery ベースのプラグインは、JavaScript オブジェクトを HTML templates_jquery にバインドします

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

May 16, 2016 pm 06:00 PM
javascript テンプレート バインディング

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

$("#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 テンプレートを定義します。




コードをコピーします
コードは次のとおりです < div id="template-userinfo" style="display: none"> ; "{{item}}">

{{年齢}}

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


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

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



コードをコピー


コードは次のとおりです:
< ;/div>
最後に、JSON データをリクエストし、事前に想像した方法でテンプレートを定義します
コードをコピーします コードは次のとおりです:

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

BTCC チュートリアル: BTCC 取引所で MetaMask ウォレットをバインドして使用する方法は? BTCC チュートリアル: BTCC 取引所で MetaMask ウォレットをバインドして使用する方法は? Apr 26, 2024 am 09:40 AM

MetaMask (中国語ではリトル フォックス ウォレットとも呼ばれます) は、無料で評判の高い暗号化ウォレット ソフトウェアです。現在、BTCC は MetaMask ウォレットへのバインドをサポートしており、バインド後は MetaMask ウォレットを使用してすぐにログイン、値の保存、コインの購入などが可能になり、初回バインドで 20 USDT のトライアル ボーナスも獲得できます。 BTCCMetaMask ウォレットのチュートリアルでは、MetaMask の登録方法と使用方法、および BTCC で Little Fox ウォレットをバインドして使用する方法を詳しく紹介します。メタマスクウォレットとは何ですか? 3,000 万人を超えるユーザーを抱える MetaMask Little Fox ウォレットは、現在最も人気のある暗号通貨ウォレットの 1 つです。無料で使用でき、拡張機能としてネットワーク上にインストールできます。

小紅書にサブアカウントをバインドするにはどうすればよいですか?アカウントが正常かどうかはどのように確認されますか? 小紅書にサブアカウントをバインドするにはどうすればよいですか?アカウントが正常かどうかはどのように確認されますか? Mar 21, 2024 pm 10:11 PM

今日の情報爆発の時代において、個人のブランドや企業イメージの構築はますます重要になっています。中国を代表するファッションライフ共有プラットフォームとして、Xiaohongshu は多くのユーザーの注目と参加を集めています。影響力を拡大し、コンテンツ配信の効率化を図りたいユーザーにとって、サブアカウントの紐付けは有効な手段となっています。では、Xiaohongshu はどのようにしてサブアカウントをバインドするのでしょうか?アカウントが正常かどうかを確認するにはどうすればよいですか?この記事では、これらの質問に詳しく答えます。 1.Xiaohongshu でサブアカウントをバインドするにはどうすればよいですか? 1. メインアカウントにログインします。まず、Xiaohongshu メインアカウントにログインする必要があります。 2. 設定メニューを開きます。右上隅の「Me」をクリックし、「設定」を選択します。 3. アカウント管理に入る: 設定メニューで、「アカウント管理」または「アカウントアシスタント」オプションを見つけて、クリックします。

Toutiao で Douyin をバインドする手順と方法 Toutiao で Douyin をバインドする手順と方法 Mar 22, 2024 pm 05:56 PM

1. Toutiaoを開きます。 2. 右下隅の「My」をクリックします。 3. [システム設定]をクリックします。 4. [アカウントとプライバシーの設定]をクリックします。 5. [Douyin]の右側のボタンをクリックしてDouyinをバインドします。

Cainiao アプリを Pinduoduo にバインドするにはどうすればよいですか? Cainiao Wrap を Pinduoduo プラットフォームに追加するにはどうすればよいですか? Cainiao アプリを Pinduoduo にバインドするにはどうすればよいですか? Cainiao Wrap を Pinduoduo プラットフォームに追加するにはどうすればよいですか? Mar 19, 2024 pm 02:30 PM

Cainiao アプリは、さまざまな物流情報を提供できるプラットフォームです。ここの機能は非常に強力で使いやすいです。物流関連の問題があれば、ここで解決できます。とにかく、それはあなたに 1 つをもたらすことができます-stopサービスはすべてを時間内に解決できます。速達の確認、速達の受け取り、速達の発送などはすべて問題なく行われます。さまざまなプラットフォームと連携しており、すべての情報を照会できます。しかし、場合によっては、 Pinduoduo で購入した商品は物流情報を表示できない場合がありますが、実際には、これを実現するには手動で Pinduoduo をバインドする必要があります。具体的な方法は以下に整理されており、誰でも見ることができます。 Cainiao を Pinduoduo アカウントにバインドする方法: 1. Cainiao APP を開き、メインページに移動します。

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

Cainiao APP を Pinduoduo にバインドする方法 Cainiao APP を Pinduoduo にバインドする方法 Cainiao APP を Pinduoduo にバインドする方法 Cainiao APP を Pinduoduo にバインドする方法 Mar 19, 2024 pm 05:16 PM

Cainiao Wrap を使用するときに Pinduoduo をバインドする方法をご存知ですか? Cainiao Wrap アプリの公式バージョンでは、このプラットフォーム上の Pinduoduo の物流情報の一部が自動的に同期されません。注文番号をコピーするか、携帯電話で確認するだけです。速達情報がある場合。もちろん、これらはすべて手動で完了する必要があります。さらに詳しく知りたい場合は、エディターに来て確認してください。 Cainiao APP を Pinduoduo にバインドする方法 1. Cainiao APP を開き、メイン ページの左上隅にある「パッケージ ガイド」をクリックします。 2. インターフェイスには、多くのショッピング サイトがあり、アカウントをバインドできます。 3. クリックして他の電子商取引プラットフォームをインポートします。 4. ユーザー認証: Pinduoduo をクリックしてインターフェイスに移動します。

Xiaomi 車アプリを充電パイルデバイスにバインドする方法 Xiaomi 車アプリを充電パイルデバイスにバインドする方法 Apr 01, 2024 pm 06:52 PM

Xiaomi が発売した最新の Mi su7 モデルカーは、さまざまなホット検索リストを独占しています。車を購入したいと考えている多くのユーザーが、購入のために Xiaomi su7 モデルカーを選択しました。では、Xiaomi 車アプリを使用して、選択後に車をバインドするにはどうすればよいですか?充電に家庭用充電パイルを使用する場合は、このチュートリアル ガイドで詳しく説明しますので、お役に立てれば幸いです。まず、Xiaomi モバイル アプリを開き、右下隅にある [My] ボタンをクリックすると、My インターフェイスで、ホーム充電パイルのオプションが表示され、充電パイルをバインドするページに入った後、スキャン コードをクリックします下のボタンをクリックして、充電パイルの QR コードをスキャンします。QR コードを使用して、充電パイルをアプリにバインドできます。

PPTマスクを追加する方法 PPTマスクを追加する方法 Mar 20, 2024 pm 12:28 PM

PPTのマスキングについては、馴染みのない方も多いと思いますが、PPTを作成する際によく理解せず、自分の好きなものを作るために適当に作っている人が多いため、PPTのマスキングの意味が分からない、理解できないという人も多いと思います。 「このマスクが何をするのか知っています。そして、それが写真の単調さを軽減できることさえ知りません。学びたい友達は、来て学び、あなたの PPT 画像に PPT マスクを追加してください。単調さを減らしてください。」では、PPT マスクを追加するにはどうすればよいでしょうか?以下をお読みください。 1. まず、PPT を開き、空白の画像を選択し、次に [背景形式の設定] を右クリックして単色を選択します。 2. [挿入]をクリックし、ワードアートをクリックし、単語を入力します。 3. [挿入]をクリックし、[図形]をクリックします。

See all articles