如何在HTML元素中存儲對象引用？

我正在從HTML對象中創建一個表單，我從JSON文件導入了一個javascript對象。我使用recurisve算法來構建HTML表格和各個元素（標籤，文本框等）這些字段用當前節點的值加載。如何在HTML元素中存儲對象引用？

這個想法是編輯文本框中的值;然後更新javascript對象。當發生更改時，編輯器會將JSON對象發送到服務器並更新文件。

令人困惑的問題是，如何引用已更改的節點？我嘗試了幾種的方法無濟於事。

編輯：

這是我在做什麼的基本原理：

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對象？

來源

2012-01-26 JohnnyStarr

請分享代碼，指出你有什麼，什麼不工作以及它應該做什麼。 –

您是否在尋找在文本框中按下某個鍵時觸發的事件？或者你想讓別人點擊一個按鈕來更改值？ – ThatOtherPerson

加載頁面時，它聲明一個全局變量「obj」，它構建一個元素樹。我希望在對文本框進行更改時更改全局對象「obj」。 – JohnnyStarr

首先你需要一種方法來單獨識別輸入，所以我會添加一個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將是一個全局數組。希望這是有道理的。

來源

2012-01-26 19:49:40

謝謝，但這並不改變我在頁面加載時聲明的預先存在的對象「obj」。我需要能夠更改對象和它的子節點，以便在編輯結束時擁有一個完整的對象，以便我可以將其發送回服務器。 – JohnnyStarr

你能向我們展示對象的內容嗎？這可能會使它更容易理解。 –

呃..這就是我寫的完全相同的解決方案，在此之前發佈。 –

我見過很多人使用的方法是data-前綴的特殊屬性。

例如：

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

然後，找到與JavaScript的屬性：

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

或者使用jQuery：

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

正如你所看到的，jQuery的data方法自動在屬性的前面加上data-。

來源

2012-01-26 19:31:25 ThatOtherPerson

其實在jquery中你可以做'$（'＃pie'）。data（'like-pie'）' –

@Interstellar_Coder：Neat ！我不知道！ – ThatOtherPerson

嗯，這是如何讓你更新原始的JavaScript對象？ – JohnnyStarr

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

因此，現在DOM元素具有「更改」屬性。您還可以使用任何其他值（日期，陣列等）

來源

2012-01-26 19:32:21

如果一個HTML元素有一個未通過JS定義的屬性，那麼您可能無法以沒有'getAttribute'的方式檢索其屬性。但是，如果您知道該屬性是使用JS設置的，則應始終有效。 –

您應該看看knockoutjs。它有一個完整的綁定引擎，可以自動更新html和對象模型之間的值。因此，只需將正確的值輸入到文本框或用於更新值的任何內容，就可以發回JSON模型。

來源

2012-01-26 19:35:14

這可能是矯枉過正的，不得不爲此包括一個完整的庫，但如果OP經常這樣做，它是一個選項。 –

你可能是對的，我們不知道，但它仍值得提及。 –

當生成的文本框發生變化時，這將更新您的原始模型（全局對象）。

當使用打印功能：

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

它更新的東西，如：

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

而在你的JS，如果使用JQuery，你要聽你的輸入元素的所有更改。如有必要添加班級。

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

來源

2012-01-26 20:23:40

如何在HTML元素中存儲對象引用？

回答

相關問題