Javascript 如何在HTML元素中存储对象引用？

我正在用从JSON文件导入的javascript对象构建一个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，深度）{
用于（输入obj）{
if（类型（对象[键]）==‘对象’）{
打印（键+“”）；
构建_树（obj[key]，深度+1）；
}否则
打印（键+“”）；
}

现在，如何将obj[key]的值绑定到文本框，以便在更改

---

值它更新Javascript对象？

我见过许多其他人使用的一种方法是一个带有

数据-

前缀的特殊属性

例如：

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

或者使用jQuery：

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

如您所见，jQuery的方法自动将

data-

前置到属性的前面

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

---

因此，现在DOM元素的属性“已更改”。您还可以使用任何其他值（日期、数组等）

您应该看看。它有一个完整的绑定引擎，可以自动更新html和对象模型之间的值。因此，只要在文本框中输入了正确的值，或者使用任何方法更新值，您就可以发回JSON模型。

首先，您需要一种方法来分别识别他这样输入，我会添加一个

数据键

属性

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+"'>");
} 

---

obj

将是一个全局数组。希望这有意义。

当生成的文本框更改时，这将更新您的原始模型（全局obj）

使用打印功能时：

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

---

请共享代码，指明您拥有什么、什么不起作用以及它到底应该做什么。您是在寻找在文本框中按下某个键时触发的事件？还是希望有人单击按钮来更改值？加载页面时，它会声明一个全局变量“obj”，它构建了一个元素树。我希望当你对文本框进行更改时，它会更改全局对象“obj”。Johnny查看我的答案，告诉我这是否对你有效。这正是knockoutjs所做的。实际上在jquery中，你可以只做

$（“#派”）。数据（'like-pie'））

@Interstallar\u Coder:太好了！我不知道！嗯，这怎么能让你更新原始javascript对象？我想根本没有人解决过我的问题。我需要能够更新全局对象，不管当前树迭代的深度有多深。@Johnnystar:对不起，我不理解原始问题n、 这可能有点过分了，只需为此包含一个完整的库，尽管如果OP经常这样做，这是一个选项。你可能是对的，我们不知道，但它仍然值得一提。如果HTML元素有一个未通过JS定义的属性，那么在没有

getAttribute。但是，如果您知道该属性是用JS设置的，则应该始终有效。谢谢，但这不会更改预先存在的对象“obj”我在页面加载时声明。我需要能够更改对象及其子节点，以便在编辑结束时有一个完整的对象，以便我可以将其发送回服务器。您可以向我们显示对象的内容吗？这可能会更容易理解。嗯……这正是我编写的解决方案，在这个解决方案发布之前特德。
$('input[type="text"]').on('change',function(){
   var key = $(this).data('key'); 
   obj[key] = $(this).val(); 
}); 

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

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

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