Mustache.js выводит html-элементы из строя в Can.js - PullRequest
Новая
       22

Mustache.js выводит html-элементы из строя в Can.js

0 голосов
/ 29 июня 2018

Прежде всего, вот некоторая основная справочная информация для моего вопроса.

Итак, в проекте, над которым я работаю, мы используем Can.js в качестве библиотеки рендеринга, с mustache.js для облегчения динамического связывания элементов. Так, например, если я получаю некоторые данные с сервера, username, я могу использовать усы со следующей строкой 

<h1>Hi {{username}}</h1>

, который фактически отображается в следующем html 

<h1>Hi Rich</h1>

Это полезно для рендеринга динамических элементов формы, когда у нас есть сервер, который говорит, например, что эта форма для someUser1 должна иметь элементы a, b и c, но другой человек someUser2 может видеть только a и c.

Это может выглядеть примерно так: 

<table class = 'dynamic-row-container"> 
  {{#data.elementA.isActive}}
     <tr class='elementA'>
        <td>{{data.elementA.formHeader}}</td>
        <!-- Some specific form element here... -->
     </tr>
  {{/data.elementA.isActive}}
  {{#data.elementB.isActive}}
     <tr class='elementB'>
        <td>{{data.elementB.formHeader}}</td>
        <!-- Some specific form element here... -->
     </tr>
  {{/data.elementB.isActive}}
  {{#data.elementC.isActive}}
     <tr class='elementC'>
        <td>{{data.elementC.formHeader}}</td>
        <!-- Some specific form element here... -->
     </tr>
  {{/data.elementC.isActive}}
</table>

Если someUser2 получит доступ к форме, приведенный выше HTML будет отображаться как ... 

<table class = 'dynamic-row-container"> 
   <tr class='elementA'>
      <td>Element A form header</td>
      <!-- Some specific form element here... -->
   </tr>
   <tr class='elementC'>
      <td>Element C form header</td>
      <!-- Some specific form element here... -->
   </tr>
</table>

Итак, вот где моя проблема проявляется. Иногда, когда может визуализировать вышеуказанный шаблон, мои элементы появляются не по порядку, а иногда и полностью за пределами родительского контейнера. У меня есть один случай, когда тег <tr>...</tr> каким-то образом отображается полностью вне родительского контейнера <table>...</table>! Как это показано ниже: 

<tr class='elementC'>
  <td>Element C form header</td>
  <!-- Some specific form element here... -->
</tr>
<table class = 'dynamic-row-container"> 
  <tr class='elementA'>
    <td>Element A form header</td>
    <!-- Some specific form element here... -->
  </tr>
</table>

Очевидно, что это недопустимый HTML, и моя таблица в итоге выглядит совершенно неправильно. Кто-нибудь когда-нибудь сталкивался с этой проблемой, особенно при использовании усов с can.js? Эту конкретную проблему трудно воспроизвести, так как кажется, что это происходит почти случайно.

Однако основы проблемы можно найти в этой скрипке . Раздел A у меня всегда появляется, тогда C должен появиться под ним. Однако C отображает данные js в, а затем помещает html элемента вне родительского контейнера div.

...