オブジェクト参照をHTML要素にどのように格納しますか？

Question

JSONファイルからインポートしたjavascriptオブジェクトのHTMLフォームを作成しています。 私は再帰アルゴリズムを使ってHTMLテーブルと各要素（ラベル、テキストボックスなど）を構築します。 フィールドは現在のノードの値で読み込まれます。

考えられるのは、テキストボックスの値を編集することです。これは次にjavascriptオブジェクトを更新します。 の変更が行われると、エディタはJSONオブジェクトをサーバーに送信し、ファイルを更新します。

困ったことに、変更されたノードはどうやって参照するのですか？私はいくつかの方法を試してみました。

EDIT：

これは私がやっているの基本的な考え方です：今

function build_tree(obj, depth) { 
    for (key in obj) { 
     if (typeof(obj[key]) == 'object') { 
      print(key + "<input type="text" value='" + obj[key] + "'>"); 
      build_tree(obj[key], depth + 1); 
     } else 
      print(key + "<input type="text" value='" + obj[key] + "'>"); 
} 

、私は時になるようにテキストボックスにOBJ [キー]の値を、結合しない方法私は 値を変更してJavascriptオブジェクトを更新しますか？

Answer 1

最初に入力を個別に識別する方法が必要なので、data-key属性を追加します。

function build_tree(obj, depth) { 
    for (key in obj) { 
     if (typeof(obj[key]) == 'object') { 
      print(key + "<input type="text" value='" + obj[key] + "' data-key= '"+key+"'>"); 
      build_tree(obj[key], depth + 1); 
     } else 
      print(key + "<input type="text" value='" + obj[key] + "' data-key= '"+key+"'>"); 
} 

次に、ツリーが構築された後に、変更イベントハンドラを各テキスト入力に添付します。

$('input[type="text"]').on('change',function(){ 
    var key = $(this).data('key'); 
    obj[key] = $(this).val(); 
}); 

objはグローバル配列です。これが理にかなってほしい。

Answer 2

多くの人が使用しているアプローチは、data-のプレフィックスを持つ特殊な属性です。例えば

：次に

<div id="pie" data-like-pie="true">I do like pie.</div> 

、JavaScriptを使用して属性を見つけるために：あなたは自動的に、jQueryのdata方法を見ることができるように

likesPie = $("#pie").data("like-pie"); 

：

likesPie = document.getElementByID("pie").getAttribute("data-like-pie"); 

またはjQueryを使っての属性の先頭にdata-が付加されます。

Answer 3

document.getElementById('name').changed = true; 

だから、DOM要素は 'changed'プロパティを持っています。他の値（日付、配列など）を使用することもできます

Answer 4

knockoutjsをご覧ください。 HTMLとオブジェクトモデル間の値を自動的に更新するバインディングエンジン全体を備えています。だから、必要なのは、正しい値がテキストボックスに入力されたとき、あるいは値を更新するために使用されるときにJSONモデルを返すことだけです。

Answer 5

生成されたテキストボックスが変更されると、元のモデル（グローバルobj）が更新されます。

あなたの印刷機能を使用して：

print(key + "<input type="text" value='" + obj[key] + "'>"); 

をのようなものに更新：jQueryのを使用して、あなたの入力要素上のすべての変更を聞きたい場合は、

print(key + "<input type="text" value='" + obj[key] + "' data-object-key='" + key + "' >"); 

そしてあなたのJSインチ 必要に応じてクラスを追加します。

$("input[type='text']").change(function() 
{ 
    var key = $(this).data("object-key"); 
    obj[key] = $(this).val(); 
});