W końcu jedyną rzeczą, która się zmienia, jest to, jak chcesz, aby instrukcje były używane i rozszerzane. Są one nieco inne niż poprzednie, ale jedną ważną rzeczą jest to, że appendChild
nie powinno być wewnątrz pętla atrybutów instrukcji dla węzła, ale zaraz po nim; należy również zwrócić uwagę na pewne specjalne atrybuty, może class
nie jest jedynym, który wie :) ...spróbuj całkowicie zastąpić wewnętrzny for block
z następującymi :
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);
}
============
ZAKTUALIZOWANO
Teraz wynik jest dokładnie taki, jakiego oczekiwano. Naprawiłem nawet głupi błąd obsługujący class
atrybut. Wypróbuj, może nawet na innych wejściach, próbowałem umieścić tekst zamiast null na niektórych danych i wygląda dobrze. Do zobaczenia!
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;
})();
}