Question

我正在使用我从JSON文件导入的javascript对象构建HTML表单。我使用recurisve算法来构建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对象的值？

Answer 1

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

Answer 2

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

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

Answer 3

首先你需要一种单独识别输入的方法，所以我会添加一个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 4

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

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

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

5 个答案: