Подскажите как правильно организовать.
Есть определенная верстка, которая отдается сервером в виде html элемента, и эта же верстка может меняться динамически на странице скриптом после ajax-запроса.
В первом случае html формируется в файлах php, во втором - в js-скриптах. Как правильно это организовать, чтобы верстка не отличалась.
- просто помнить разработчику что этот блок html формируется в разных местах
- может отдавать в ajax-запросе готовый html, который также формируется в файлах view
может есть какая-то общая практика
updated: Пример - сервер отдает список моделей при первом формировании страницы::
<ul class="list">
<li class="fruit" data-attr="alpha">
<a href="#">
<img src=""/>
<div>
apple
</div>
</a>
</li>
<li class="fruit" data-attr="beta">
<a href="#">
<img src=""/>
<div>
orange
</div>
</a>
</li>
...
получаю данные ajax запросом
{
"gamma": "pineapple",
"delta": "cherry"
}
динамически создаю или добавляю новые dom-элементы на стороне клиента
$.each(obj, function(i, $val)
{
var li = $('<li>');
$('<li>', { class: 'fruit' })
.append(
$('<a>', { href: '#' })
.append(
$('<img>', { src: '' })
)
.append(
$('<div>', { text: 'somefruit' })
)
)
.appendTo('ul.list');
});
updated 2: На стороне php могут быть условия в верстке, которые например как этот
if( isset($imgSrc) ){?>
<img src="<?php echo $imgSrc?>"/>
<?}
else{?>
<span><?php echo $name?></span>
<?}
Вопрос в том, какие есть практики для поддержания вот таких dom-структур идентичными и на стороне php и на стороне js