अंत में केवल एक चीज जो बदलती है वह यह है कि आप निर्देशों का उपयोग और विस्तार कैसे करना चाहते हैं। ये पहले वाले से थोड़े अलग हैं लेकिन एक महत्वपूर्ण बात यह है कि 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;
})();
}