2012-06-26 3 views
2

Я смотрел следующее видео и задавался вопросом, можно ли создать рекурсивный шаблон для вывода всех свойств/имен методов любого объекта в DOM? -
http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/video/17905336Как создать рекурсивный шаблон ExtJS для вывода любого объекта javascript?

Вот чистый Javascript пример того, что мне любопытно делать с XTemplate в ExtJS - http://jsfiddle.net/SLJZ3/

var mObj = {}; 
mObj.mArr = []; 
mObj.mArr.push({id:['id1','id2','id3']}); 
mObj.mArr.push({days:['Monday','Tuesday','Wednesday','Thursday']}); 
mObj.mArr.push({colors:['orange','red','blue','green','yellow','white']}); 
mObj.mArr.push(function isTrue(){return true;}); 

function r(obj) { 
    if (obj) 
     for (var key in obj) { 
      if (typeof obj[key] == "object") 
       r(obj[key]); 
      else if (typeof obj[key] == "function") 
       document.writeln("<span style='color:silver'>" + obj[key] + "</span><br/>"); 
      else if (typeof obj[key] != "function") 
       document.writeln(obj[key] + "<br/>") 
     } 

    return; 
} 

r(mObj);​ 

ответ

1

XTemplate позволяет исполнять пользовательские функции или даже произвольный встроенный код внутри шаблонов (см. соответствующие разделы на странице связанных документов), поэтому я предполагаю, что технически вы можете вызывать рекурсивную функцию из XTemplate, но это не лучше, чем просто вызвать вашу рекурсивную функцию напрямую.

Я вижу вашу идею здесь - приведение разметки за пределами вашей функции выхода, но я боюсь XTemplate не будет очень полезно, если вы хотите перебрать в объекте, потому что он имеет только конструкции для переборе массивов.

Пример в «Авто заполнение массивов» говорит:

<tpl for=".">...</tpl>  // loop through array at root node 

Таким образом, вы можете только написать шаблон:

<p>Name: {name}</p> 
<tpl for="days"> 
    ...iterate days array 
</tpl> 
<tpl for="colors"> 
    ...iterate colors array 
</tpl> 

То есть, когда вы знаете, какие свойства должны быть там внутри ваш объект данных.

Или вы можете определить отдельные шаблоны для различных типов данных, которые вы выводите.

+0

благодарит за дополнительную информацию. я думаю, мне нужно было бы сначала рекурсивно нажать элемент DOM в дерево, которое затем можно было бы использовать в tpl? – DaveAlger

+1

Вы имеете в виду рекурсивно итерировать свои данные, чтобы создать шаблон «на лету», а затем на самом деле применить его на лету? Это звучит как излишество, полезно только в том случае, если структура ваших данных повторяется. но если он повторяется, тогда вы можете создать свой шаблон статически? –

Смежные вопросы