Как организовывать динамическое добавление html с помощью js?

Question

[Михаил Шатилов]

Собственно, все в вопросе.
Пример:

<ul id="list"></ul>
<a href="#" class="add">add</a>
<script type="text/javascript">
$('.add').on('click',function(){
$('#list').append('<li>text</li>');
});
</script>

Прикол в том, что нужно писать <li>text</li> и в php, и в js. Когда конструкция в 100 раз больше, то получается дублирование в php и js. Опять же, нельзя

<script type="text/javascript">
var text = '<?php echo '<li>text</li>'; ?>;
</script>

потому, что в атрибуте li может быть что-то типа data-number="number_from_js".

Как избежать дублирования без применения ajax?

Comments

[Михаил Шатилов]

Вроде так яснее.

<ul id="list">
	<?php
		foreach($list as $item) {
			echo '<li data-number="'.$item->id.'"><input type="checkbox" name="item['.$item->id.'][]"></li>';
		}
	?>
</ul>
<a href="#" class="add">add item</a>

<script type="text/javascript">
	var number = <?php echo count($list);?>
	$('.add').on('click',function(){
		last_number++;
		$('#list').append('<li data-number="'+last_number+'"><input type="checkbox" name="item['+last_number+'][]"></li>');
	});
</script>

Answer 1

[sergealmazov]

Переработайте свой код. Не понятно для каких целей вам потребовалось дублирование и в php, и в js.

Comments

[Михаил Шатилов]

Дополнил. Вместо "var numbe" читайте "var last_number =", ошибся.

Answer 2

[Сергей Протько]

на самом деле сложно, ибо шаблоны для php и для js всеравно будут хотя бы незначительно различаться. Как вариант, можно использовать близкие по синтаксису реализации шаблонизаторов (например twig и twig.js).

Answer 3

[Yuri Morozov]

1. берете любой клиентский шаблонизатор
2. выводите пререндер

<ul id="list">
<?php foreach ($items as $item): ?>
<li><?= $item->name ?>
<?php endforeach; ?>
</ul>

3. добавляете шаблон

<script id="my-template" type="text/x-whatever">
<li>{{:name}}</li>
</script>

4. оживляете (псевдокод, детали см в реализации конкретного шаблонизатора)

$('.add').on('click',function() {
var html = $('#my-template').render({id: 1, name: 'test'});
$('#list').append(html);
}

Некое дублирование разметки всё же остается, но оно всё в одном месте, поэтому проблем особых не вызывает.