Вложенные шаблоны Javascript ... это возможно / допустимо?

Question

Возможно ли иметь вложенные теги шаблонов JavaScript, например,

<script id="Product" type="text/html">
    <div class="product">
        ....
        <div class="features">
            <script id="Features" type="text/html">
                <div class="feature">
                    ...
                </div>
            </script>
        </div>
        ...
    </div>
</script>

Когда оценивается шаблон "Продукт", шаблон функции теперь доступен как шаблон, который я могу вызвать, когда я буду готов.

Когда я пытаюсь использовать этот метод в своем браузере, я замечаю, что некоторые элементы отображаются в неправильном порядке, как будто я где-то забыл конечный тег.

Однако, когда я удаляю вложенный шаблон (Feature), этовсе хорошо ...

Интересно, был ли правильный способ достижения этого.

Answer 1

Вы не можете вкладывать script теги. Как работают теги script, браузер читает открывающий тег, а затем начинает создавать строку кода в нем, вообще не интерпретируя этот код. Он перестает делать это в первый раз, когда видит точную последовательность < / s c r i p t >. Браузер всегда останавливается на первом из тех, что он находит, и, что особенно важно, он игнорирует любую промежуточную открывающуюся последовательность тегов, например < s c r i p t >. Это потому, что браузер не анализирует код скрипта, это не его работа. Это разделение интересов. (script теги, вероятно, вообще не должны быть тегами, а скорее чем-то вроде CDATA структуры. Но это то, что у нас есть.)

Например, с точки зрения браузера:

<script id="Product" type="text/html">              SCRIPT STARTS HERE
    <div class="product">                           SCRIPT CODE CONTINUES
        ....                                        SCRIPT CODE CONTINUES
        <div class="features">                      SCRIPT CODE CONTINUES
            <script id="Features" type="text/html"> SCRIPT CODE CONTINUES (*NOT* START OF SCRIPT)
                <div class="feature">               SCRIPT CODE CONTINUES
                    ...                             SCRIPT CODE CONTINUES
                </div>                              SCRIPT CODE CONTINUES
            </script>                               SCRIPT ENDS
        </div>                                      ENDING `div` TAG (probably mis-matched)
        ...
    </div>
</script>                                           MIS-MATCHED ENDING `script` TAG

Теперь, если вы используете какой-либо шаблонизатор server на стороне, который заменит эти теги сценария с разметкой и затем отправит обновленную разметку в браузер, затем это зависит от шаблонизатора, поддерживает ли он вложение. Браузеры нет.

Answer 2

Вы можете использовать <style type="text/html"></style> или <noscript></noscript>, чтобы обернуть тег <script></script>.

Я думаю <noscript> лучше <style>

пример:

<noscript id="s">
  <div class="r">
    <p>{%= o.rand %}</p>
    <script>
      console.log('sdf');
    </script>
  </div>
</noscript>

<style id="s" type="text/html">
  <div class="r">
    <p>{%= o.rand %}</p>
    <script>
      console.log('sdf');
    </script>
  </div>
</style>

Answer 3

Иногда мне кажется, что я хочу использовать вложенные теги scipt для шаблонов, но вместо этого вам нужно сделать следующее:

Сценарий 1

 <script id="Product" type="text/html">
     <div class="product">
         ....
         <div class="features">
             <!-- INSERT FEATURES HERE -->   
         </div>
         ...
     </div>
 </script>

Сценарий 2

 <script id="Product_Features" type="text/html">
     <div class="feature">

     </div>
 </script>

Вы можете 'namespace' ID, если вы действительно хотите, чтобы указать, что это «дочерний» шаблон. Это делает его более понятным, если оно не предназначено для использования само по себе (очевидно, это зависит от вас, имеет ли это смысл или нет).

После прочтения ответа T.J.s это стало единственной очевидной альтернативой тому, что я изначально думал, что хотел (вложенные сценарии).

Однако вам, вероятно, не понадобятся вложенные шаблоны, если вам не нужно выбирать, какой «дочерний» шаблон использовать. Если есть только один возможный макет для дочернего шаблона, просто используйте 'foreach' в соответствии с вашим механизмом шаблонов.

Answer 4

Попробуйте это:

<script id="Product" type="text/html">
<!--
    <div class="product">
        ....
        <div class="features">
            <script id="Features" type="text/html">
                <div class="feature">
                    ...
                </div>
            </script>
        </div>
        ...
    </div>
-->
</script>

Когда вам нужно его получить:

document.getElementById("Product").text.replace(/(?:^\s*<!--\s*)|(?:\s*-->\s*$)/g, "");

Answer 5

Можно ли использовать jQuery?Если это так, это очень возможно (и даже, смею сказать, обычное дело):

http://blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/