JQuery с усами JS Issue

Question

JQuery с усами JS Issue

0

Я использую 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

spidergeuse 13 март 2014, в 16:49

Источник

Теги:

javascript

jquery

html

templates

mustache

2 ответа

1

Сделайте это так: с .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>

aliopi 18 авг. 2015, в 11:58

Ещё вопросы

bobthecow · Accepted Answer · 2014-03-14T01-51-00.000Z

Ваш шаблон модифицируется DOM, потому что вы вставляете его в <div> как "HTML", а это не так. Это делает именно то, что сделает браузер, если вы дадите ему эту разметку. Он помещает {{# Users }} в ближайшее доступное допустимое место для его размещения.

Это по той же причине, что ваш шаблон изначально хранится в <script>. Вы всегда должны использовать теги <script> для хранения ваших шаблонов, и вы всегда должны использовать .text() для их чтения и записи:

var $newDcsTemplate = $('<script/>').text($('#dcs-template').text());
console.log($newDcsTemplate.text())

Благодарю. Чтобы иметь возможность редактировать содержимое, вам нужно загрузить его во что-то еще, кроме тега <script />, так как я не смог заставить .find () работать с $ newDcsTemplate, когда я подумал, что <script /> но это работает с <div />
Проблема, с которой вы столкнетесь, заключается в том, что вы не можете использовать DOM для манипулирования вещами, которые не являются допустимым HTML, а шаблоны почти никогда не будут действительными HTML.
Что касается примера, который я предоставил выше, после того, как я извлек шаблон в тег div, я могу манипулировать содержимым div. Ниже приведен фрагмент кода с идентификатором dcs-type-list из шаблона без проблем. Var $ newDcsTemplate = $ ('<div />'). html ($ ('# dcs-template'). html ()); var $ dcsTypeTable = $ newDcsTemplate.find ('# dcs-type-list');