javascript - 嵌套的 Javascript 模板……这可能/有效吗?

标签 javascript templates nested

是否可以嵌套 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>

评估模板“产品”时,功能模板现在可以作为模板使用,我可以在准备好时调用它。

当我在浏览器中尝试此方法时,我注意到某些元素以错误的顺序出现,就好像我在某处忘记了结束标记一样。

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

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

最佳答案

不能嵌套script标签。一路script标签工作时,浏览器读取开始标签,然后开始在其中构建一串代码,而根本不解释该代码。它在第一次看到确切的序列 < 时就停止了。 / s c r i p t > .浏览器总是会停在它找到的第一个,最重要的是它忽略 任何介入的开始标签序列,如 < s c r i p t > .这是因为浏览器不解析脚本代码,这不是它的工作。这是一个关注点分离的事情。 (script 标签可能根本不应该是标签,而是更像 CDATA 结构的东西。但它们就是我们所拥有的。)

例如,从浏览器的 Angular 来看:

<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

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

关于javascript - 嵌套的 Javascript 模板……这可能/有效吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6322541/

相关文章:

html - Golang模板中的嵌套范围

javascript - 位置相对div换行输入框

C++ 编译时程序范围内的唯一编号

php - 如何通过 jQuery 将 PHP 文件加载到 DIV 中?

javascript - 如何在Kendo Grid的url列中显示带有模板的窗口

c++ - C++模板或运算符?

iphone - 在 Objective-C 中使用嵌套引用

JavaScript:setTimeout (setInterval) 不起作用

javascript - 'aria-describedby'什么时候返回空值

javascript - 最后点击的图像周围的边框