В крайна сметка единственото нещо, което се променя, е как искате инструкциите да се използват и разширяват. Те са малко по-различни от предишните, но едно важно нещо е, че appendChild
не трябва да е вътре атрибутите на инструкциите се завъртат за възела, но веднага след това извън него; трябва да се обърне внимание и на някои специални атрибути, може би class
не е единственият, кой знае :) ...опитайте да замените напълно вътрешния for block
със следното:
var tag = null, a;
if ('tag' in _instr) {
tag = document.createElement(_instr.tag);
if ('attributes' in _instr)
for(a in _instr.attributes) {
a.match(/^class$/) && (a = 'className');
tag.setAttribute(a,_instr.attributes[a]);
}
if ('events' in _instr)
for(a in _instr.events)
tag.addEventListener(a,_instr.events[a], false);
//
// if ('content' in _instr && _instr.content!==null)
// tag.innerHTML = _instr.content;
//
// but take care ... what if is a input[text]
tag[_instr.tag=='input' ? 'value' : 'innerHTML'] = ('content' in _instr && _instr.content !== null) ? _instr.content : o[k];
if ('children' in _instr)
for(a in _instr.children)
_(_instr.children[a], a, tag);
!!_n && !!tag && _n.appendChild(tag);
}
==================
АКТУАЛИЗИРАНО
Сега резултатът сега е точно този, който се очаква. Дори поправих глупав бъг при обработката на class
атрибут. Опитайте го, може би дори на други входове, опитах се да поставя текст вместо нула на някои данни и изглежда добре. Ще се видим!
function assemble (data, instr) {
var n = document.createDocumentFragment(), i;
function create(d) {
return (function _(_instr, _d, _key, _n) {
var tag = null, i;
if ('tag' in _instr) {
tag = document.createElement(_instr.tag);
tag.innerHTML = 'content' in _instr && !!_instr.content ? _instr.content : typeof _d == 'string' ? _d : '';
if ('attributes' in _instr)
for (i in _instr.attributes)
tag.setAttribute(i, _instr.attributes[i]);
if ('events' in _instr)
for(i in _instr.events)
tag.addEventListener(i,_instr.events[i], false);
//recur finally
if ('children' in _instr) {
for (i in _instr.children){
_(_instr.children[i], _d[i], i, tag);
}
}
!!_n && _n.appendChild(tag);
}
return tag;
})(instr, d, null);
}
return (function (){
for (i in data) {
n.appendChild(create(data[i]));
}
return n;
})();
}