Вы можете использовать библиотеку микротемплирования, такую как Усы , для анализа входящих объектов JSON в фрагменты HTML с использованием синтаксиса шаблона {{ key }}.Если ваш объект выглядит следующим образом:
var myObj = {
name: 'Joe Smith',
age: 25,
features: {
hairColor: 'red',
eyeColor: 'blue'
}
};
Используя Усы, вы можете легко преобразовать его в HTML, используя {{#}} и {{/}} для обхода вложенных объектов:
Mustache.render('Hello, my name is {{name}} and I am {{age}} years old. {{#features}} I have {{hairColor}} hair and {{eyeColor}} eyes.{{/features}}', myObj);
который выводит:
Здравствуйте, меня зовут Джо Смит и мне 25 лет.У меня рыжие волосы и голубые глаза.
РЕДАКТИРОВАТЬ: более уместное приложение - динамически генерировать панель управления, используя шаблон с вложенными списками объектов.Вот мой шаблон и объект (HTML разбит на список и объединен для ясности):
var panel = [
'<div id="cpanel">',
'{{#cpanel}}',
'<div class="panel_section">',
'<h1 class="cpanel">{{name}}</h1>',
'<p>',
'{{#content}}',
'<button id="{{id}}">{{id}}</button>',
'{{/content}}',
'</p>',
'</div>',
'{{/cpanel}}',
'</div>',
].join('\n');
var panelObj = {
cpanel: [
{
name: 'playback',
content: [
{id: 'play'},
{id: 'pause'},
{id: 'stop'}
]
}, {
name: 'zoom',
content: [
{id: 'zoomIn'},
{id: 'zoomOut'}
]
}]
};
Затем вы визуализируете с усами:
Mustache.render(panel, panelObj);
, который выдает:
<div id="cpanel">
<div class="panel_section">
<h1 class="cpanel">playback</h1>
<p>
<button id="play">play</button>
<button id="pause">pause</button>
<button id="stop">stop</button>
</p>
</div>
<div class="panel_section">
<h1 class="cpanel">zoom</h1>
<p>
<button id="zoomIn">zoomIn</button>
<button id="zoomOut">zoomOut</button>
</p>
</div>
</div>