JSONをDOMに保存するためのベストプラクティス

Question

HTMLテンプレートを使用してjsonデータをレンダリングしたいとします。

まだ何も実装を開始していませんが、jsonからhtml要素にデータの値を設定して1レコードのテンプレートが含まれているか、何らかの引数を使ってアイテムのコレクションをレンダリングできるようにしたいと考えています。各項目のテンプレートHTMLですが、項目をレンダリングするために使用されたソースJSONと同じ形式でJSONオブジェクトを取得することもできます（私の最初のJSONにはレコード行の振る舞いに関する詳細が必要ですユーザーがこのレコードで何かを行うことができるかどうかを確認するためにajaxリクエストを行い、この情報のすべてがテンプレートに表示されないようにします。

私は、格納するオブジェクトの各プロパティとJSONとのマッパー関数の入力要素で隠しフォームを作ることができると知っていますが、私には過剰なもののように聞こえます。いくつかのより軽い "エンベロープ"。

JSONオブジェクトをhtmlに「シリアライズ」および「非直列化」できるJSライブラリがあるので、DOMのどこかに格納できます（データの表示が含まれている要素ですが、フォーム要素として表示する必要のない追加の属性を格納する）最初の答えは、グローバル変数にJSONを格納示唆したように

UPDATE、私はまたにJSONの「マッピング」を行うことになることについて考え、そして私の「最高の」精神的な解決策は、JavaScriptのモジュール（またはjQueryプラグイン）を作ることだったてきましたhtmlに値を格納することができない場合は、それを内部変数に格納することができます。したがって、html要素からデータを取得する場合は、ローカルコピーからデータを取得できます。私はこれが良い方法があることを知りたいですか？この情報を変数に保存するライブラリーがありますが、そのデータをhtmlでリアルタイムにバインドしているのであれば、私はとても満足しています。

UPDATE 2この今http://knockoutjs.com/使用して行われ、もはやDOMでJSONを維持する必要が、ノックアウトは行いませんJSON < => HTMLマッピング自動的に私はJSONを保存する任意のライブラリがあるとは思わない

Answer 1

自然の目的として保存しないのはなぜですか？javascriptオブジェクトですか？ DOMは恐ろしい場所です。

つまり、jQueryにはこれを許可するdata methodがあります。

Answer 2

ドームで

jsonからのデータを使用してhtmlをレンダリングし、そのjson変数のコピーをjavascriptのグローバル変数として保持することができます。

Answer 3

テンプレートからDOMFragmentを作成したJSONデータへの参照を保持しますか？

テンプレートとデータを受け取り、DOMノードを返すテンプレート関数があるとします。

var node = template(tmpl, json); 
node.dataset.origJson = json; 
node.dataset.templateName = tmpl.name; 

ノードのデータセットに元のjsonを保存できます。あなたはデータセットを必要とするかもしれません。

テンプレートエンジンを使用せずにJSONをHTMLに「マップ」する方法もありません。それでも、jsonデータに（メタデータとして）テンプレート名を格納しなければならず、それは私にとっては醜いと感じます。

Answer 4

私は以前と同様にいくつかの異なる方法でこれを行いました。

$('selector').dataのアイデアはおそらく最も有用なテクニックの1つです。私は、データを論理的、直感的かつ整然とした方法で保存することができるので、このようにデータを保存するのが好きです。

ページロード時に3つの記事を取得するajax呼び出しがあるとします。記事には、見出し、日付/時刻、ソースなどに関するデータが含まれている場合があります。さらに、見出しを表示すると仮定し、見出しをクリックすると完全な記事とその詳細を表示するとします。このようなAJAX呼び出しから

{ 
    articles: [ 
     { 
      headline: 'headline 1 text', 
      article: 'article 1 text ...', 
      source: 'source of the article, where it came from', 
      date: 'date of the article' 
     }, 
     { 
      headline: 'headline 2 text', 
      article: 'article 2 text ...', 
      source: 'source of the article, where it came from', 
      date: 'date of the article' 
     }, 
     { 
      headline: 'headline 3 text', 
      article: 'article 3 text ...', 
      source: 'source of the article, where it came from', 
      date: 'date of the article' 
     } 
    ] 
} 

：ビットのは、我々のようなJSON見て何かを取得しましょう概念を説明するために

。 。 。

考えられるのは、関連付けられたデータをDOM要素に格納し、必要に応じて後でそのデータにアクセス/操作/削除できるという考えです。これにより、可能な追加のデータ呼び出しが削減され、データが特定のDOM要素に効果的にキャッシュされます。

いつでも、見出しリンクがドキュメントに追加された後、データはjqueryセレクタを介してアクセスできます。最初の見出し用の商品データにアクセスするには：

$('#headlines .headline:first()').data.article.headline 
$('#headlines .headline:first()').data.article.article 
$('#headlines .headline:first()').data.article.source 
$('#headlines .headline:first()').data.article.date 

セレクタとjQueryオブジェクトを介してデータにアクセスすると、みかん端正です。