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

【问题标题】：How do you store object references in HTML elements?如何在 HTML 元素中存储对象引用？
【发布时间】：2012-02-19 21:27:39
【问题描述】：

我正在使用从 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[key] 的值绑定到文本框，这样当我更改值它更新 Javascript 对象？

【问题讨论】：

请分享代码，说明您拥有什么、什么不工作以及应该做什么。
您是否正在寻找在文本框中按下某个键时触发的事件？还是您希望有人单击按钮来更改值？
当页面加载时，它声明了一个全局变量“obj”，它构建了一个元素树。我希望当您更改文本框时，它会更改全局对象“obj”。
约翰尼看看我的答案，让我知道这是否适合你。
这正是 knockoutjs 所做的。

标签： javascript html json

【解决方案1】：

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

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

【讨论】：

如果一个 HTML 元素的属性不是通过 JS 定义的，如果没有getAttribute，您可能无法以这种方式检索它的属性。但是，如果您知道该属性是使用 JS 设置的，那么这应该始终有效。

【解决方案2】：

首先，您需要一种方法来单独识别输入，因此，我将添加一个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 将是一个全局数组。希望这是有道理的。

【讨论】：

谢谢，但这不会改变我在页面加载时声明的预先存在的对象“obj”。我需要能够更改对象及其子节点，以便在编辑结束时拥有一个完整的对象，以便我可以将其发送回服务器。
你能告诉我们对象的内容吗？它可能更容易理解。
uhmm.. 那是我在发布之前写的完全相同的解决方案。

【解决方案3】：

我看到许多其他人使用的一种方法是使用带有 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- 添加到属性的前面。

【讨论】：

其实在jquery中你可以做$('#pie').data('like-pie')
@Interstellar_Coder：整洁！我不知道！
嗯，这如何让您更新原始 javascript 对象？
我认为根本没有人解决我的问题。无论树的当前迭代深度有多远，我都需要能够更新全局对象。
@JohnnyStarr：抱歉，没看懂原问题。

【解决方案4】：

你应该看看knockoutjs。它有一个完整的绑定引擎，可以自动更新 html 和对象模型之间的值。因此，您需要做的就是在文本框中输入正确的值或用于更新值的任何内容时发回 JSON 模型。

【讨论】：

仅仅为此而包含整个库可能有点过头了，尽管如果 OP 经常这样做，这是一种选择。
你可能是对的，我们不知道，但仍然值得一提。

【解决方案5】：

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

使用打印功能时：

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();
});

【讨论】：