Question

我正在尝试构建一个名为assemble的动态数据绑定函数，它接受（2）输入参数：

server response (JSON) - 嵌套的json对象。
instruction set (JSON) - 控制绑定的配置对象。

问题： 该函数目前不绑定嵌套的json。

问题： 我需要更改哪些内容才能支持所需的输出？

当前输出：

<form class="myForm">
    <div class="myFirstName">john</div>
    <div class="myLastName">doe</div>
    <div>john.doe@gmail.com</div>
    <div>this is a static inject element</div>
    <div class="myNestedContainer">
        //HERE IS MY PROBLEM
        //RETURNS undefined
        <span class="myUserAge">undefined</span>
        <span class="myUserDob">undefined</span>
        <span class="myRace">undefined</span>
    </div>
</form>
<form class="myForm">
    <div class="myFirstName">jane</div>
    <div class="myLastName">doe</div>
    <div>jane.doe@gmail.com</div>
    <div>this is a static inject element</div>
    <div class="myNestedContainer">
        //HERE IS MY PROBLEM
        //RETURNS undefined
        <span class="myUserAge">undefined</span>
        <span class="myUserDob">undefined</span>
        <span class="myRace">undefined</span>
    </div>
</form>

所需的输出：

<form class="myForm">
    <div class="myFirstName">john</div>
    <div class="myLastName">doe</div>
    <div>john.doe@gmail.com</div>
    <div>this is a static inject element</div>
    <div class="myNestedContainer">
        <span class="myUserAge">26</span>
        <span class="myUserDob">1990</span>
        <span class="myRace">white</span>
    </div>
</form>
<form class="myForm">
    <div class="myFirstName">jane</div>
    <div class="myLastName">doe</div>
    <div>jane.doe@gmail.com</div>
    <div>this is a static inject element</div>
    <div class="myNestedContainer">
        <span class="myUserAge">25</span>
        <span class="myUserDob">1991</span>
        <span class="myRace">white</span>
    </div>
</form>

服务器响应：

response=[
    {
        first: "john",
        last: "doe",
        email: "john.doe@gmail.com",
        profile:{
            age: "26",
            dob: "1990",
            race: "white"
        }
    },
    {
        first: "jane",
        last: "doe",
        email: "jane.doe@gmail.com",
        profile:{
            age: "25",
            dob: "1991",
            race: "white"
        }
    }
]

指令集：

instruction={
    tag:"form",
    attributes:{"class":"myForm"},
    children:{
        first:{
            tag:"div",
            attributes:{"class":"myFirstName"},
            content: null
        },
        last:{
            tag:"div",
            attributes:{"class":"myLastName"},
            content: null
        },
        email:{
            tag:"div",
            content: null
        },
        myFakeTag:{
            tag:"div",
            content: "this is a static inject element"
        },
        profile:{
            tag:"div",
            attributes:{"class":"myNestedContainer"},
            children:{
                age:{
                    tag:"span",
                    attributes:{"class":"myUserAge"},
                    content: null
                },
                dob:{
                    tag:"span",
                    attributes:{"class":"myUserDob"},
                    content: null
                },
                race:{
                    tag:"span",
                    attributes:{"class":"myRace"},
                    content: null
                }
            }
        }
    }
}

汇编功能：

assemble=(data,instr)=>{
    var instr = (typeof instr !== "string") ? instr : instr.split('.').reduce((o,i)=>o[i], model);
    var n = new DocumentFragment();
    var gen=(d)=>{
        var o = d;
        return(_=(_instr,k,_n)=>{
            for(b in _instr){
                switch(b){
                    case "tag":
                        var tag = document.createElement(_instr[b]);
                        break;
                    case "attributes":
                        for(a in _instr[b]){
                            tag.setAttribute(a,_instr[b][a]);
                        }
                        break;
                    case "events":
                        for(a in _instr[b]){
                            _instr[b][a].forEach((l)=>{
                                tag.addEventListener(a,l);
                            });
                        }
                        break;
                    case "content":
                        tag.innerHTML = (_instr[b]===null) ? o[k] : _instr[b];
                        break;
                    case "children":
                        for(var _i in _instr[b]){
                            _(_instr.children[_i],_i,tag);
                        }
                        break;
                }
                !!_n && !!tag && _n.appendChild(tag);
            }
            return tag;
        })(instr, null);
    };
   (()=>{
       for(i in data){
           var test = gen(data[i]);
           n.appendChild(test);
       }
    })();
    return n;
}

Answer 1

最后，唯一改变的是你希望如何使用和扩展指令。这些与前一点略有不同，但重要的一点是appendChild不应该在里面节点的指令属性循环，而是在它之后;必须注意一些特殊属性，也许class不是唯一的，谁知道:) ... 尝试使用以下内容完全替换内部for block：

绑定动态服务器响应（嵌套json）

1 个答案: