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>

当评估模板“产品”时，功能模板现在可用作我准备好时可以调用的模板。

当我在浏览器中尝试此方法时，我注意到某些元素的显示顺序错误，好像我忘记了某处的结束标记。

但是，当我删除嵌套模板（功能）时，这一切都很好......

想知道是否有正确的方法来实现这一点。

Answer 1

您无法嵌套script标记。 script标签的工作方式，浏览器读取开始标签，然后开始在其中构建一串代码，而根本不解释该代码。它第一次看到确切的序列时停止这样做< / s c r i p {{1 }} t。浏览器将始终停在其找到的第一个，并且至关重要的是忽略任何干预的打开标记序列，例如> < s c r i p t。这是因为浏览器不解析脚本代码，这不是它的工作。这是一个关注事物的分离。（>标签可能根本不应该是标签，而是更像script结构的东西。但它们就是我们所拥有的。）

例如，从浏览器的角度来看：

CDATA

现在，如果您正在使用服务器 - 某种模板引擎，它将使用标记替换这些脚本标记，然后将更新后的标记发送到浏览器，然后由模板引擎决定它是否支持嵌套。浏览器没有。

Answer 2

使用jQuery还可以吗？如果是这样，这很可能（甚至，我敢说，常见）：

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

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>

如果您真的想要，可以“命名”ID，以表明它是一个“子”模板。如果不打算单独使用它会更清楚（显然，如果它有意义，这取决于你）。

在阅读T.J.s答案之后，这成了我原本以为我想要的唯一明显的替代方案（嵌套脚本）。

但是，您可能不需要嵌套模板，除非您需要选择使用哪个“子”模板。如果子模板只有一种可能的布局，那么只需根据模板引擎使用'foreach'。

Answer 4

您可以使用<p-pickList [source]="list1" [target]="list2"> <ng-template let-car pTemplate="item"> <p-table #table [columns]="cols" [value]="sales" [scrollable]="true" scrollHeight="200px"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns"> {{col.header}} </th> </tr> </ng-template> <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr> <td *ngFor="let col of columns"> {{rowData[col.field]}} </td> </tr> </ng-template> </p-table> </ng-template> </p-pickList>或<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>

Answer 5

是的，可能有嵌套标签，但没有HTML序列化。

使用XHTML：

<iframe src="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20contenteditable%3D%22true%22%3E%3Chead%3E%3Ctitle%3EXHTML%20nested%20%26lt%3Bscript%26gt%3B%3C%2Ftitle%3E%3C%2Fhead%3E%3Cbody%3E%3Cstyle%3Estyle%2C%20script%20%7B%20display%3A%20block%3B%20font-family%3A%20monospace%3B%20white-space%3A%20pre%3B%20padding-left%3A%2010px%20%7D%0Astyle%20%7B%20border-left%3A%2010px%20solid%20%2398A6C0%20%7D%0Ascript%20%7B%20border-left%3A%2010px%20solid%20%23D6F034%20%7D%3C%2Fstyle%3E%3Cscript%20id%3D%22Product%22%20type%3D%22text%2Fhtml%22%3Eouter%0A%20%20%20%20%3Cdiv%20class%3D%22product%22%3E%0A%20%20%20%20%20%20%20%20....%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22features%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cscript%20id%3D%22Features%22%20type%3D%22text%2Fhtml%22%3Einner%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22feature%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20...%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fscript%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20...%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fscript%3E%3C%2Fbody%3E%3C%2Fhtml%3E" width="100%"></iframe>

Answer 6

不，您不能真正在 .当它在内部找到类似的标签时，浏览器将始终停止构建代码执行。嵌套脚本是否具有开始标记并不重要。这是因为浏览器没有按照 TJ Crowder

的解释解析代码

Answer 7

试试这个：

<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, "");

嵌套的Javascript模板......这可能/有效吗？

7 个答案: