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

问题描述

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

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.

推荐答案

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

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