Я использую jQuery и Mustache Js в проекте.
У меня есть шаблон в теге скрипта. Для шаблона требуется некоторый динамический/переменный html на основе некоторых данных. Поэтому я загружаю шаблон с помощью jQuery, манипулирую его, а затем записываю обратно в тег скрипта.
Тем не менее, загрузка шаблона в div (для манипуляции), использование jquery, похоже, изменяет структуру шаблона (он перемещает вещи), что делает недействительным шаблон.
Как обновить шаблон динамически и избежать этой проблемы? (Любая помощь/Указатели/и т.д.)
Оригинальный шаблон
<table>
<thead>
<tr>
<td>FN</td>
<td>SN</td>
<td>OT</td>
</tr>
</thead>
<tbody>{{#Users}}
<tr class="tr-border" data-row-id="{{DCSID}}">
<td class="td-border">{{FN}}</td>
<td class="td-border">{{SN}}</td>
<td class="td-border">{{OT}}</td>
</tr>{{/Users}}</tbody>
</table>
Загрузка с jquery в другой div вызывает это ниже (перемещает {{#Users}} {{/Users}} неуместно)
{{#Users}} {{/Users}}
<table>
<thead>
<tr>
<td>FN</td>
<td>SN</td>
<td>OT</td>
</tr>
</thead>
<tbody><tr class="tr-border" data-row-id="{{DCSID}}">
<td class="td-border">{{FN}}</td>
<td class="td-border">{{SN}}</td>
<td class="td-border">{{OT}}</td>
</tr></tbody>
</table
Ниже приведен код, как я это делаю. Также здесь ссылка js скрипка
var $newDcsTemplate = $('<div/>').html($('#dcs-template').html()); // for manipulation
var original1 = $('#dcs-template').html()
var original2 = document.getElementById('dcs-template').innerHTML;
// manipulate the template here and replace content of script tag with it.
console.log(original1); // works fine
console.log(original2) // works fine
console.log($newDcsTemplate.html()) // messed up the template
Ваш шаблон модифицируется DOM, потому что вы вставляете его в <div>
как "HTML", а это не так. Это делает именно то, что сделает браузер, если вы дадите ему эту разметку. Он помещает {{# Users }}
в ближайшее доступное допустимое место для его размещения.
Это по той же причине, что ваш шаблон изначально хранится в <script>
. Вы всегда должны использовать теги <script>
для хранения ваших шаблонов, и вы всегда должны использовать .text()
для их чтения и записи:
var $newDcsTemplate = $('<script/>').text($('#dcs-template').text());
console.log($newDcsTemplate.text())
Сделайте это так: с .html()
и без </script>
:
<table>
<thead>
<tr>
<td>FN</td>
<td>SN</td>
<td>OT</td>
</tr>
</thead>
<tbody>
<!-- {{#Users}} -->
<tr class="tr-border" data-row-id="{{DCSID}}">
<td class="td-border">{{FN}}</td>
<td class="td-border">{{SN}}</td>
<td class="td-border">{{OT}}</td>
</tr>
<!-- {{/Users}} -->
</tbody>
</table>