javascript - 并排迭代两个对象

Question

我有一个架构和一个数据对象。使用架构，我需要创建一个表单，使用数据对象，我需要填充它。解决这个问题的最佳方法是什么？

示例:

var schema = {
    object: {
        someData: {
           type: "String",
           required: "true"
        },
        name: {
          type: "String",
          required: "false"
       }
   }
}

var data = {
   object: {
       someData: "foo",
       name: "John"
   }
}

由此我需要生成这样的东西

<form>
<fieldset><legend>object</legend>
<input type="text" name="someData" value="foo">
<input type="text" name="name" value="John">
</fieldset>
</form>

我想了几种方法来实现这一点，但我认为我把它复杂化了。一定有更简单的方法，对吧？

有两个问题:架构不是固定的，它可以改变。另一方面是某些数据类型本身就是对象。

编辑:我过于简单化了这个问题。这是最简单的可能情况，但在我的特定情况下，我有更复杂的数据对象和模式，它们会发生变化，而且一旦用户编辑某些内容，我还需要从表单重新创建数据对象。我编辑了数据以考虑到这一点。

Answer 1

创建一个接受架构和数据的函数，然后在该函数中创建表单。这是一个基本示例。在生产中，您可以在函数中针对不同的数据类型使用 switch 语句。

fiddle : http://jsfiddle.net/CR58L/8/

var FormBuilder = function(schema, data) {
    this.schema = schema
    this.data = data

    this.form = document.createElement("form")
    this.inputs = []

    this.form.addEventListener("submit", this)
    this.createInputs()
}

FormBuilder.prototype = {
    "createElement": function(field, data, fieldset) {
        var fieldset = fieldset || false,
            element, value

        switch ( data.type ) {
            case "String":
                element = document.createElement("input")
                element.setAttribute("name", field)

                value = (fieldset ? this.data[fieldset][field] : this.data[field]) || ""
                element.setAttribute("value", value)

                if ( data.required === "true" ) element.setAttribute("required", "required")
                if ( fieldset ) element.setAttribute("data-fieldset", fieldset)
                break;
        }

        this.inputs.push(element)
        return element
    },    
    "createInputs": function() {
        var element, fieldset

        for ( var field in this.schema ) {
            if ( this.schema[field]["type"] ) {
                element = this.createElement(field, this.schema[field])
                this.form.appendChild(element)
            } else {
                fieldset = document.createElement("fieldset")
                legend = document.createElement("legend")
                legend.innerHTML = field
                fieldset.appendChild(legend)

                for ( var input in this.schema[field] ) {
                    element = this.createElement(input, this.schema[field][input], field)
                    fieldset.appendChild(element)
                }

                this.form.appendChild(fieldset)
            }
        }

        element = document.createElement("button")
        element.setAttribute("type", "submit")
        element.innerHTML = "Submit"

        this.form.appendChild(element)
    },
    "handleEvent": function(e) {
        e.preventDefault()
        var element, _dataRef, fieldset

        for ( var input in this.inputs ) {
            element = this.inputs[input]
            fieldset = element.getAttribute("data-fieldset")

            _dataRef = fieldset ? this.data[fieldset] : this.data
            _dataRef[element.getAttribute("name")] = element.value
        }

        console.log(data)
    }
}

var fb = new FormBuilder(schema, data)
document.getElementById("container").appendChild(fb.form)