嵌套的 Javascript 模板......这可能/有效吗? [英] Nested Javascript Templates ... is this possible / valid?

问题描述

是否可以嵌套 JavaScript 模板标签，例如

...

评估模板产品"后，功能模板现在可用作模板，我可以在准备好时调用.

当我在浏览器中尝试这种方法时，我发现有些元素以错误的顺序出现，好像我忘记了某个地方的结束标记.

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

想知道是否有适当的方法来实现这一点.

解决方案

您不能嵌套 script 标签.script 标签的工作方式是，浏览器读取开始标签，然后开始在其中构建代码字符串，根本不解释该代码.当它第一次看到确切的序列 < / s c r i p t >.浏览器将始终在它找到的第一个标签处停止，并且至关重要的是，它忽略任何介入的打开标签序列，例如 < s c r i p t <代码>>.这是因为浏览器不解析脚本代码，这不是它的工作.这是一个关注点分离的事情.(script 标签可能根本不应该是标签，而更像是一种 CDATA 结构.但它们就是我们所拥有的.)

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

脚本结束

ENDING `div` 标签(可能不匹配)...

错误匹配的结尾`script`标签

现在，如果您使用的是某种服务器端模板引擎，它将替换那些带有标记的脚本标记，然后将更新后的标记发送到浏览器，那么它是否支持嵌套取决于模板引擎.浏览器没有.

Is it possible to have nested JavaScript template tags e.g.

<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>

When the template "Product" is evaluated the feature template is now available as a template that I can call when I'm ready.

When I try this method in my browser, I notice some elements appear in the wrong order as if I forgot an end tag somewhere.

However when I remove the nested template (Feature) it is all good ...

Wondering if there was proper way of achieving this.

解决方案

You can't nest script tags. The way script tags work, the browser reads the opening tag and then starts building up a string of the code therein without interpreting that code at all. It stops doing that the first time it sees the exact sequence < / s c r i p t >. The browser will always stop at the first of those it finds, and crucially it ignores any intervening opening tag sequence, like < s c r i p t >. This is because the browser doesn't parse the script code, that's not its job. It's a separation of concerns thing. (script tags probably shouldn't be tags at all, but rather something more like a CDATA structure. But they're what we have.)

E.g., from the browser's point of view:

<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

Now, if you're using a server-side templating engine of some kind that will replace those script tags with markup and then send the updated markup to the browser, then it's up to the templating engine whether it supports nesting. Browsers do not.

这篇关于嵌套的 Javascript 模板......这可能/有效吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！